מירכוז אנכי של אלמנטים ב-CSS

במאמר שכריס קויר פרסם לפני כמה שבועות בבלוג css-tricks.com הוא הביא שיטה חדשה-ישנה למירכוז של אלמנטים ב-CSS, שבעזרת Pseudo-Elements שהוא כ”כ מעריץ – הפכה להיות נקיה ואלגנטית מתמיד.

כידוע, רק תאים בטבלה תומכים במאפיין vertical-align בעוד על DIV רגיל זה לא בדיוק ימרכז את התוכן הפנימי (אלא ישפיע את המירכוז החיצוני שלה, כפי אסביר בהמשך). קיימת שיטה לגרום ל-DIV להיתנהג כמו תא בטבלה ע”י המאפיין display:table-cell אבל גם לה יש כמה חסרונות – משנה את ההתנהגות של ה-DIV כך שהוא הופך למעיין inline-block ולא מתנהג כ-block רגיל, וכן יש לו את כל המגרעות של תא טבלה ביחס למיקומים של אלמנטים פנימיים.

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

.block{
	position:absolute;
	left:50%;
	top:50%;
	width:200px;
	height:200px;
	margin:-100px 0 0 -100px;
}

הרעיון הוא מירכוז הקוביה באמצעות top/left של 50%, והחסרה של חצי ממידות הקוביה באמצעות margin. לא אתעכב על דוגמאות כיוון שזו שיטה מוכרת יחסית, מי שמעוניין לבחון אותה מוזמן להציץ על דוגמאת הקוד הבאה: http://jsfiddle.net/NMXKn

השיטה שכריס מתאר באה לפתור מצבים בהם אנחנו לא יודעים מה תהיה המידה של ה-DIV. לצורך הדוגמא – DIV שמכיל טקסט דינאמי שבא מתוך בסיס נתונים, כך שהגובה שלו מותאם לפי כמות הטקסט.

השיטה היא כזו: לפני האלמנט שאנחנו רוצים למרכז – נציב אלמנט חדש בגובה 100% (מה שהוא מכנה Ghost Element), וניתן לשניהם vertical-align:middle. כיוון שהאלמנט הראשון הוא כאמור 100% גובה, הוא יגרום שהאלמנט שאחריו ימורכז לאמצע שלו, וכך יתקבל האפקט המבוקש.

.block .ghost{
    height:100%;
    display:inline-block;
    vertical-align:middle;
}
 
.block .centered{
    display: inline-block;
    width:200px; /* can be any width or height */
    vertical-align:middle;
}

והנה פידל לדוגמא: http://jsfiddle.net/NMXKn/1

לכאורה – אחלה שיטה, ומי שותיק בתחום סביר ששמע עליה בעבר, וגם כריס בעצמו מקשר לפוסט עתיק יומן בעיניין, שמטיפי ה-Semantics לא אהבו כלל. אם כן, כעת אני מגיע לפואנטה – וזו הבשורה של הפוסט שלו: עם Pseudo-Elements כל הסיפור הופך להיות נטו CSS  ללא תג “גוסט” לא סמנטי מיותר.

.block:before{
    content:'';
    height:100%;
    display:inline-block;
    vertical-align:middle;
}
 
.block .centered{
    display: inline-block;
    width:200px; /* can be any width or height */
    vertical-align:middle;
}

והפידל: http://jsfiddle.net/NMXKn/2

* IE7 לא תומך inline-block אך יש hack שמאפשר להישתמש ב-inline ולהפוך אותו לבלוקי באמצעות zoom:1. אממ, בעצם IE7 לא תומך Pseudo-Elements בכלל כך שאם IE7 חשוב לכם – לכו על טבלאות 🙂

וכאמור – הקרדיט על המאמר הוא לחלוטין של כריס קויר מ-Css-Tricks.com