הבעת IT

לפני שהיינו צריכים להתמודד עם CSS כדי ליצור פריסות עמוד שלנו, יישור קצת תוכן בתוך תא בטבלה נראה משחק פשוט של הילד. כל שעליך לעשות הוא להגדיר "ליישר" או נכס "valign" של השולחן כדי לקבל את היישור של הבחירה שלך, חתיכת עוגה!
עם פריסות CSS, אם כי יש לנו "אנכי ליישר" נכס עבור היסודות, זה לא נראה פשוט כמו "ליישר" או "valign" מאפיינים. להיות specifiic יותר "אנכי ליישר" אף פעם לא נראה לפתור את כל הבעיות שלך, במיוחד אם הם כותבים חתיכת לדפדפנים CSS.

ללא שימוש טבלאות HTML, הבעיה של שבמרכזו אובייקט, בין אם מדובר בתמונה או טקסט במסגרת חלוקת המכיל, הייתה כנראה כל ממשק משתמש / CSS למפתחי סיוט בשלב כלשהו. הבעיה עוד יותר את אומדן הדאגות שלך על יישור, אם האובייקט להיות מרוכז דינמית בטבע, כלומר, כאשר הגובה שלה הוא משתנה (גובה לא ידוע).

אמנם אין פתרון ישר קדימה ידוע כי יעבוד על פני מגוון של דפדפנים לנו להתמודד עם, הפתרון שניסיתי להגיע אכן נראה לעבוד הדפדפנים כמה שניסיתי אותו (IE6, אינטרנט אקספלורר 7 , FF).

הפתרון:
בדפדפנים כמו Mozilla, Opera ו-Safari, מתנהג מוזר "אנכי ליישר" נכס ניתן להביא את החושים שלו, פשוט על ידי קביעת "תצוגה" נכס אגף המכיל את "תא הטבלה" (תצוגה: שולחן תאים) .

הבעיה עדיין נשארת עם המשפחה של הדפדפנים אינטרנט אקספלורר, אשר עדיין לא נראה להבין מה לעשות עם הנכס "שולחן תאים" ו בורים כפי שהם, הם פשוט להתעלם מזה. הפתרון כדלקמן, אם כי, מודעות פשוטים כמה אלמנטים של DOM מעט יותר ל-HTML שלך כדי לגרום לדברים לקרות.

CSS ו-HTML נראה כך
.outer_container {
display: table;
text-align:center;
height: 140px;
width:140px;
position: relative;
overflow: hidden;
float:left;
margin:0px 10px 0px 0px;
}
.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute;
#top: 50%;
#left:50%;
}
.obj{
#position: relative;
#top: -50%;
#left:-50%;
margin:0px auto 0px auto;
}

HTML: -
<div class="outer_container">
<div class="obj_container">
<div class="obj"> <img src="image1.jpg"/> <br/> צפיות: 3456 </ p>
</ P>
</ P>

התוצאה נראית כך: -

הצג את הדגמת כאן | מקור הורדת קבצים (הורד 450 פעמים)

---

הבנת את הפתרון:
עבור הדפדפנים כי מבין תצוגה: שולחן תצוגה: שולחן מאפייני תא, זה רק לעתים רחוקות צריך שום הסבר. עבור אינטרנט אקספלורר, עם שימוש האק ספציפי IE (גרזן חשיש), אנחנו בהחלט למקם את האובייקט מיכל (obj_container) במחצית הגובה זמין. אז האובייקט (obj) בתוך עמדת יחסית מועבר על ידי מחצית גובהו ... טוב! נראה לי שאני מבין את המבט על הפנים שלך, אבל זה עובד. נסה את זה!
הטכניקות הנ"ל משולבים כדי לתת לנו את הפתרון הנ"ל דפדפנים.

---

CSS ניתן לשנות בקלות להלן להשיג, אנכי-align: למעלה או אנכי-align: למטה

TOP יישור CSS
.obj_container_top {
display: table-cell;
vertical-align: top;
#position: absolute;
#top: 0%;
#left:50%;
}
.obj_top{
#position: relative;
#top: 0%;
#left:-50%;
margin:5px auto 0px auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#cccccc;
}

HTML: -
<div class="outer_container">
<div class="obj_container_top">
<div class="obj_top"> <img src="image1.jpg"/> <br/> צפיות: 1234 </ p>
</ P>
</ P>

התוצאה נראית כך: -

התחתונה יישור CSS
.obj_container_bottom {
display: table-cell;
vertical-align: bottom;
#position: absolute;
#bottom: 0%;
#left:50%;
}
.obj_bottom {
#position: relative;
#bottom: 0%;
#left:-50%;
margin:5px auto 0px auto;
}
HTML: -
<div class="outer_container">
<div class="obj_container_bottom">
<div class="obj_bottom"> <img src="image1.jpg"/> <br/> צפיות: 1234 </ p>
</ P>
</ P>

התוצאה נראית כך: -

הצג את הדגמת כאן | הורד כאן

---

מרכוז אופקי של עצם מושג פשוט עם נכס שוליים, על ידי קביעת שיעור השמאלית ואת הרווחיות, זכות אוטומטית

נראה כמו המון זמן, מאז אני מנסה למצוא פתרון סביר לבעיה זו יישור. אבל עכשיו עם הפתרון הזה, אני מרגיש שלם קטן.

בתקווה שיום אחד

• אנכי יישור נכס ב-CSS יעבוד כמו שהוא עושה בתוך תא בטבלה, מבלי להכות הרבה סחור
• לפחות, הגדרת margin-top: אוטומטי והרווחיות התחתונה: אוטומטי, ייתן כתוצאה זהה עם מרווח לשמאל ומערכת הביטחונות זכות אוטומטית
• המלחמות הדפדפן ייגמר יום אחד.
• שם זה רק דפדפן אחד עבור כולם.

הורד את ה-CSS ו-HTML של הפתרון הנ"ל כאן (הורד 450 פעמים) .. עבור understandability, CSS לא היה מותאם

נ.ב.: ודרך אגב, אלה תמונות ממוזערות של כמה תמונות אני שלחצת ...