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

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

תחביר:

להלן התחביר הבסיסי למאפיין יישור אנכי:

 selector { vertical-align: value; } 

ה'ערך' יכול להיות אחת מהאפשרויות הבאות:

קו בסיס:מיישר את קו הבסיס של האלמנט עם קו הבסיס של אלמנט האב שלו. זהו ערך ברירת המחדל עבור רוב האלמנטים.תַת:מיישר את קו הבסיס של האלמנט עם קו הבסיס של ה-subscript של הגופן של רכיב האב.סוּפֶּר:מיישר את קו הבסיס של האלמנט עם קו הבסיס העילי של הגופן של רכיב האב.חלק עליון:יישר את החלק העליון של האלמנט עם החלק העליון של האלמנט הגבוה ביותר בקו בתוך תיבת הקו.טקסט למעלה:מיישר את החלק העליון של האלמנט עם החלק העליון של הגופן של רכיב האב.אֶמצַע:מרכז אנכית את האלמנט ביחס לאלמנט האב.תַחתִית:יישר את החלק התחתון של האלמנט עם החלק התחתון של האלמנט הנמוך ביותר בקו בתוך תיבת הקו.טקסט למטה:יישר את החלק התחתון של האלמנט עם החלק התחתון של הגופן של אלמנט האב.אֲחוּזִים:האלמנט מיושר אנכית באחוז מוגדר מגובה הקו. לדוגמה, יישור אנכי: 50% ירכז את האלמנט אנכית בתוך אלמנט האב שלו.

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

דוגמאות

הנה כמה פרטים נוספים ודוגמאות הקשורות למאפיין 'יישור אנכי' ב-CSS:

1. יישור קו בסיס:

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

קו בסיס טקסט אחר

מקרי מבחן ג'וניט

2. כתב מטה וכתב עליון:

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

ח₂O זה מים. איקס²+ ו²= ר²

3. יישור עליון ותחתון:

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

מיושר למעלה מיושר למטה

4. יישור אמצעי:

dateformat.format java

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

סמל זה ממורכז אנכית

5. יישור טקסט למעלה וטקסט למטה:

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

מיושר טקסט למעלה מיושר טקסט לתחתית

6. יישור אחוז:

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

ממורכז אנכית

7. ריכוז אנכי של אלמנטים ברמת בלוק:

כדי למרכז אנכית אלמנט ברמת הבלוק בתוך האב שלו, אתה יכול להשתמש בפריסת ה-flexbox או הרשת.

 Flexbox example: html Vertically Centered css .parent { display: flex; justify-content: center; align-items: center; height: 200px; /* Set the desired container height */ } 

8. מרכוז אנכי עם גובה אלמנט לא ידוע:

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

 html Vertically Centered (Unknown Height) CSS .parent { position: relative; height: 200px; /* Set the desired container height */ } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 

9. ריכוך אנכי עם טקסט מרובה שורות:

כדי למרכז אנכית טקסט מרובה שורות בתוך מיכל, אתה יכול להשתמש בשילוב של flexbox ואלמנט פסאודו:

 html Multi-line <br>Vertically Centered Text CSS .parent { display: flex; align-items: center; height: 200px; /* Set the desired container height */ } .child { flex: 1; text-align: center; } .child::before { content: &apos;&apos;; display: inline-block; vertical-align: middle; height: 100%; } 

10. ריכוז אנכי של תמונות במיכל עם יחסי גובה-רוחב שונים:

אם יש לך תמונות ביחסי גובה-רוחב שונים שברצונך לרכז בתוך מיכל, תוכל להשתמש בשילוב של flexbox והתאמה לאובייקט:

קישוריות java

HTML:

 <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css.webp" alt="Image 1"> <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css.webp" alt="Image 2"> 

CSS:

 .parent { display: flex; align-items: center; justify-content: center; height: 200px; /* Set the desired container height */ } img { object-fit: contain; max-height: 100%; } 

11. שילוב של יישור אנכי עם גובה קו:

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

 .element { font-size: 24px; line-height: 1.5; vertical-align: middle; } 

12. שימוש במאפיין התצוגה ליישור:

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

 .container { display: table-cell; vertical-align: middle; } 

13. יישור אנכי בטבלאות:

תכונת יישור אנכי משמשת לעתים קרובות בתאי טבלה () כדי לשלוט ביישור התוכן בתוך התאים.

מדריך c#

 td { vertical-align: middle; } 

14. יישור רכיבי בלוק מוטבע:

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

 <span>&#x2B50;</span> Star Rating .icon { vertical-align: middle; font-size: 24px; } 

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

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

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

עוד כמה דוגמאות

 table, th, td{ border: 2px solid red; border-collapse: collapse; font-size: 20px; } #super{ vertical-align: super; } #sub{ vertical-align: sub; } <table class="table"> <td>baseline</td> <td>middle</td> <td>bottom</td> <td>top</td> <td>Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. </td> </table> <h2> Use of super and sub values </h2> <h3>Using super value: x<span id="super">2</span>+ y<span id="super">2</span> = r<span id="super">2</span></h3> <h3> Chemical formula of Water by using sub value: H<span id="sub">2</span>O</h3> 

תְפוּקָה

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

דוגמא

 div{ font-size: 20px; border: 2px solid red; } img{ width:150px; height: 100px; } img.top { vertical-align: text-top; } img.bottom { vertical-align: text-bottom; } img.middle { vertical-align: middle; } An <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css-2.webp"> image with a default alignment. An <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css-2.webp" alt> image with a text-bottom alignment. An <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css-2.webp" alt> image with a middle alignment. An <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css-2.webp" alt> image with a text-top alignment. 

תְפוּקָה

היתרונות של יישור אנכי ב-CSS

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

החסרונות של יישור אנכי ב-CSS

מוגבל לאלמנטים מוטבעים:המגבלה המשמעותית ביותר של מאפיין היישור האנכי היא שהוא פועל רק עבור אלמנטים ברמת השורה או תאי טבלה. זה לא חל ישירות על אלמנטים ברמת הבלוק. זה יכול להפוך את היישור האנכי למאתגר יותר עבור אלמנטים גדולים יותר או פריסות מורכבות.התנהגות לא עקבית:יישור אנכי יכול להיות מסובך ולא עקבי, במיוחד עם גדלים שונים של גופן, גבהי קווים ואלמנטים מקוננים. אותו ערך יישור אנכי עשוי להניב תוצאות שונות בהתבסס על ההקשר.מוזרויות דפדפן:לחלק מהדפדפנים הישנים יותר עשויים להיות פרשנויות או מוזרויות לא עקביות עם מאפיין ה-אנכית, מה שעלול להוביל לתוצאות בלתי צפויות. עם זאת, בעיה זו השתפרה עם התקדמות הדפדפנים המודרניים.שליטה מוגבלת על מרווחים:המאפיין אנכי יישור עוסק בעיקר ביישור אלמנטים אנכית, אך הוא מציע רק מעט שליטה על המרווח בין האלמנטים. התאמת המרווח דורשת לעתים קרובות שינויים נוספים ב-CSS או HTML.Flexbox ו-Grid כחלופות:לדרישות פריסה מורכבות יותר ויישור אנכי של אלמנטים ברמת הבלוק, מפתחים מסתמכים לעתים קרובות על Flexbox או CSS Grid, המספקים פתרונות חזקים וצפויים יותר.לא מתאים למרכוז מלא:אמנם יישור אנכי שימושי ליישור אנכי של אלמנטים מוטבעים, אך הוא מתאים לריכוז מלא (אופקי ואנכי) של אלמנטים ברמת בלוק עם טכניקות CSS נוספות.שם מטעה:השם 'יישור אנכי' יכול להיות מטעה מכיוון שהוא לא מיישר את האלמנט אנכית כמו שמפתחים מצפים לרוב. במקום זאת, הוא שולט ביישור התוכן של האלמנט בתוך תיבת השורות שלו.מורכבות עם גופנים שונים:התנהגות היישור האנכי עשויה להיות בלתי צפויה כאשר עוסקים באלמנטים בגדלים שונים של גופן ובגובה קווים שונים. זה יכול להפוך יישור אנכי עקבי למאתגר.מוגבל לפריסות מורכבות:זה לא מתאים לפריסות או תרחישים מורכבים שבהם עליך ליישר אנכית אלמנטים גדולים יותר ברמת הבלוק בתוך מיכל אב.תאימות בין דפדפנים:בעוד שדפדפנים מודרניים שיפרו את התמיכה ביישור אנכי, דפדפנים ישנים עדיין עשויים להפגין חוסר עקביות או התנהגות בלתי צפויה.טכניקות אלטרנטיביות:טכניקות פריסת CSS מודרניות כמו Flexbox ו-CSS Grid מציעות דרכים חזקות וצפויות יותר להתמודד עם דרישות פריסה מורכבות, כולל יישור אנכי של אלמנטים מוטבעים וגם ברמת הבלוק.שיקולי נגישות:שימוש ביישור אנכי לפריסה עשוי להיות לא הגישה הנגישה ביותר, מכיוון שהוא עלול להפריע לקוראי מסך ולטכנולוגיות מסייעות אחרות. HTML סמנטי וטכניקות CSS מתאימות הן לרוב אפשרויות טובות יותר עבור נגישות.אתגרי ניפוי באגים:איתור באגים של התנהגות בלתי צפויה או בעיות יישור הקשורות ליישור אנכי יכול לפעמים להיות מסובך, במיוחד כאשר עוסקים באלמנטים מקוננים ובגדלים שונים של גופן.התפתחות פריסת האינטרנט:ככל שנוף פיתוח האינטרנט מתפתח, טכניקות פריסה חדשות כמו CSS Grid Layout ו-Flexbox מספקות פתרונות מודרניים ומקיפים יותר עבור אתגרי פריסה, מה שעלול להפוך את היישור האנכי לפחות רלוונטי עבור תרחישים רבים.

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

סיכום

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