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

ב css יש אופציה ליישר לאמצע מבחינה אנכית – נקרא – vertical-align אך ברב המקרים זה לא עובד.

ברצוני להראות לכם כיצד ניתן לבצע זאת באמצעות קוד HTML ו CSS.

קוד CSS

<style>
.parent-div {display: table;background-color:#cccccc;width:100%;height:150px;}
.child-div {display: table-cell;vertical-align: middle;text-align:center;font-size:24px;font-weight:bold;color:#428bca;}
</style>

קוד HTML

 

<div class="parent-div">
    <div class="child-div">תוכן ממקום במרכז</div>
</div>

הדברים החשובים:

ה div הראשי – מוגדר: display:table

ה div הפנימי – מוגדר display:table-cell

תצוגת הקוד

 

לשאלות וקבלת הצעת מחיר צרו קשר