כיצד למקם רכיבי אינטרנט עם CSS Align אנכי

חיפוש בגוגל









נוף
תאור






יַעַר

Lorem ipsum dolor sit amet.






אוקיינוס

Lorem ipsum dolor sit amet.

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

כיצד ליישר טקסט אנכית

כברירת מחדל, רוב רכיבי הטקסט (כגון כותרות,

, ו

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

שימוש בערך העליון ליישור אנכי על טקסט

a {
 יישור אנכי: למעלה;
}

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

שימוש בערך האחוז בטקסט

a {
 יישור אנכי: -50%;
}

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

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

שימוש בערך האורך בטקסט

a {
 יישור אנכי: 90px;
}

הקוד למעלה מיישר את קו הבסיס של רכיב הטקסט באורך של 90px מעל קו הבסיס של אלמנט האב. זה מייצר את הפלט הבא בדפדפן:

כיצד ליישר אנכית תמונות

ה תג הוא רכיב מוטבע, אשר מאפיין ה-CSS ה-aligning האנכי עובד טוב איתו.

שימוש ב-Super Value ליישור אנכי בתמונות

img {
 אנכי-יישר: סופר;
}

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

שימוש באחוז ערך יישור אנכי בתמונות

img {
 יישור אנכי: 25%;
}

הקוד שלמעלה מיישר את קו הבסיס של אלמנט התמונה ב-25% מעל קו הבסיס של אלמנט האב. זה מייצר את אפקט המראה הבא של ערך העל:

שימוש בערך אורך יישור אנכי בתמונות

img {
 יישור אנכי: 5px;
}

הקוד שלמעלה מיישר את קו הבסיס של אלמנט התמונה במיקום 5px מעל קו הבסיס של אלמנט האב. זה מייצר אפקט דומה לזה של ערכי העל ו-25%:

מדיה משובצת כגון סרטונים ואיפריים הם רכיבי HTML מוטבעים. לכן, מאפיין ה-CSS של יישור אנכי עובד מצוין איתם.

שימוש ב-Super Value של יישור אנכי בסרטון

סרטון {
 vertical-align: sub;
}

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

שימוש באחוז הערך האנכי בווידאו

סרטון {
 יישור אנכי: -25%;
}

הקוד למעלה מיישר את קו הבסיס של רכיב הווידאו ב-25% מתחת לקו הבסיס של רכיב האב. זה מייצר את אפקט המראה הבא של ערך המשנה:

שימוש בערך אורך יישור אנכי בסרטון

סרטון {
 יישור אנכי: -5px;
}

הקוד שלמעלה מיישר את קו הבסיס של רכיב התמונה במיקום 5 פיקסלים מתחת לקו הבסיס של אלמנט האב. זה מייצר אפקט כמו ערכי המשנה ו-25%:

כיצד ליישר אנכית פריטים בטבלה

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

שימוש בערך העליון של יישור אנכי בנתוני טבלה

td {
 גובה: 40 פיקסלים;
 יישור אנכי: למעלה;
}

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

שימוש בערך האמצעי ליישור אנכי על נתוני טבלה

td {
 גובה: 40 פיקסלים;
 אנכי-יישר: אמצע;
}

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

שימוש בערך התחתון של יישור אנכי על נתוני טבלה

td {
 גובה: 40 פיקסלים;
 אנכי-יישר: תחתון;
}

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

עכשיו אתה יכול ליישר את האלמנטים בדף האינטרנט שלך

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

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

על הסופר

קדיישה קין (52 מאמרים שפורסמו)

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

עוד מתוך קדיישה קין