6 טריקים CSS כדי ליישר תוכן אנכית

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

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

1. השתמש במיקום מוחלט

הטריק הראשון שאנחנו הולכים לראות כאן משתמש עמדה נכס. יש לך שניים

, אחד הוא המכולה, השני, אלמנט הילד המכיל את התוכן.

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

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

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

2. השתמש CSS3 המרה

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

בהנחה שיש לנו אותו מבנה HTML כמו השיטה הקודמת - הורה אחד, אלמנט ילד אחד - 50% מלמעלה באמצעות CSS המרה נותן תרגום של -50%. ויש לך את זה.

זכור כי CSS3 Transforms לא יעבוד ב- Internet Explorer 8 ומטה. ייתכן שתרצה להשתמש בכל השיטות האחרות כאן כמו נסיגה.

.3 השתמש בריפוד

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

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

4. השתמש בשורה גובה

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

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

5. השתמש בטבלת CSS

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

6. השתמש ב- Flexbox

השיטה האחרונה למיקוד אנכי היא באמצעות Flexbox. Flexbox הוא מודול חדש ב- CSS3. הוא מציע שיטה פשוטה יותר ליישור התוכן. כדי למרכז את התוכן אנכית בתיבה להגמיש, פשוט להוסיף יישור פריטים: מרכז; כדלקמן, וזהו.

זכור כי Flexbox דפדפנים מסוימים תומכים רק בתכונה חלקית של מודול Flexbox כגון Internet Explorer 10, Safari, 6 ו- Chrome 27 ומטה. לפיכך, בדומה לטריק עם CSS3 Transform, ודא כי האפקט נופל יפה בדפדפן.