כאשר פריסת הדף לעתים קרובות יש צורך לבצעיישור מרכז בדרך CSS: לדוגמה, מרכז הבלוק הראשי. ישנם מספר פתרונות לבעיה זו, שכל אחד מהם, במוקדם או במאוחר, צריך להיות בשימוש על ידי כל מעצב הפריסה.
יישור טקסט למרכז
לעתים קרובות למטרות דקורטיביות אתה צריך להגדיריישור טקסט במרכז, CSS במקרה זה מאפשר לצמצם את זמן הפריסה. בעבר, זה נעשה באמצעות תכונות HTML, אבל עכשיו תקן דורש ליישר את הטקסט באמצעות גיליונות סגנון. שלא כמו בלוקים שעבורם אתה רוצה לשנות את הזחה, ב- CSS יישור הטקסט המרכזי נעשה עם שורה אחת:
- יישור טקסט: מרכז;
נכס זה עובר בירושה ועובר מהורה.לכל צאצאיו. זה משפיע לא רק על טקסט, אלא גם על אלמנטים אחרים. כדי לעשות זאת, הם חייבים להיות מוטבעים (לדוגמה, span) או בלוק מוטבע (כל בלוקים שיש להם את התצוגה: מאפיין בלוק). האפשרות השנייה גם מאפשר לך לשנות את רוחב וגובה של אלמנט, יותר גמישות להתאים את כניסות.
לעתים קרובות, ליישר הוא לייחס את התג עצמו. זה מיד הופך את הקוד לא חוקי, מאז W3C זיהה את התכונה align כמו מיושן. אין להשתמש בו בדף.
יישור למרכז
אם ברצונך להגדיר את היישור של ה- div למרכז, CSSיכול להציע דרך נוחה למדי: באמצעות הזחה שוליים חיצוניים. כניסות ניתן להגדיר כמו אלמנטים בלוק, קו לחסום. ערך המאפיין צריך לקחת את הערכים 0 (כניסות אנכיות) ואת אוטומטי (כניסות אופקיות אוטומטיות):
- שוליים: 0 אוטומטי;
עכשיו אפשרות זו מוכרת לחלוטיןתקף. השימוש בחריצים חיצוניים גם מאפשר לך להגדיר את היישור של התמונה במרכז: המאפיין שולי CSS מאפשר לך לפתור בעיות רבות הקשורות למיקום של אלמנט בדף.
יישור בלוק שמאלה או ימינה
לפעמים מרוכז בצורה CSS לאחובה, אבל אתה צריך לשים שני בלוקים זה לצד זה: אחד מצד שמאל, השני מימין. בשביל זה יש נכס float, אשר יכול לקחת אחד משלושה ערכים: שמאל, ימין או אף אחד. נניח שיש לך שני בלוקים שצריך להרכיב. אז הקוד יהיה כך:
- .lft {float: left;}
- .right {float: right}
אם יש גם בלוק שלישי, אשר צריך להיות ממוקם תחת שני בלוקים הראשונים (למשל, תחתונה), אז זה צריך להגדיר את הנכס ברור:
- .lft {float: left;}
- .right {float: right}
- כותרת תחתונה {לנקות: שניהם}
העובדה היא כי בלוקים עם שיעורים שמאלה וימינהנופלים מהזרם הכללי, כלומר, כל שאר היסודות מתעלמים מקיומו של אלמנטים שווים. נקה: המאפיין מאפשר את הכותרת התחתונה או כל בלוק אחר לראות אלמנטים נשרו מהזרם ואוסר גלישת (לצוף) הן בצד שמאל והן בצד ימין. לכן, בדוגמה שלנו, תחתונה ישתנה.
יישור אנכי
Бывают случаи, когда недостаточно задать יישור מרכזי בדרכי CSS, אתה עדיין צריך לשנות את המיקום האנכי של גוש הילד. ניתן ללחוץ על כל אלמנט מוטבע או מוטבע בלוק לקצה העליון או התחתון, הממוקם באמצע אלמנט האב, או בכל מקום שהוא. לרוב יש צורך ביישור החסימה במרכז, לשם כך משתמשים בתכונה ליישור אנכי. נניח שיש שני בלוקים, האחד מקונן בשני. במקרה זה, החסימה הפנימית היא אלמנט בלוק קו (תצוגה: בלוק מוטבע). יש צורך ליישר את גוש הילד בצורה אנכית:
- יישור עליון - .child {vertical-align: top};
- יישור מרכזי - .child {vertical-align: middle};
- יישור תחתון - .child {vertical-align: bottom};
יישור טקסט או יישור אנכי לא משפיעים על רכיבי חסום.
בעיות אפשריות עם בלוקים מיושרים
לפעמים מרוכז חטיבה בצורה CSSעלול לגרום לבעיות קלות. לדוגמה, בעת שימוש בציפה: נניח שיש שלושה חסימות:. ראשית,. השנייה ושלישית. הגוש השני והשלישי נמצא הראשון. אלמנט עם מחלקה שנייה מיושר לשמאל והבלוק האחרון מיושר לימין. לאחר פילוס שניהם נפלו מהנחל. אם לאלמנט ההורה אין גובה (לדוגמה, 30 מ '), הוא יפסיק למתוח לאורך גובה אבני הילד. כדי להימנע משגיאה זו, השתמש ב"מרווח "- בלוק מיוחד שרואה .שניה ושלישית. קוד CSS:
- . השנייה {float: left}
- .שלישית {float: right}
- .clearfix {גובה: 0; ברור: שניהם;}
נעשה שימוש לעתים קרובות בשיעור פסאודו:לאחר מכן, מה שמאפשר גם להחזיר את הבלוקים למקם על ידי יצירת מפצל פסאודו (בדוגמה בחלוקה עם מיכל הכיתה טמון בפנים. ראשית ומכיל שמאל ו. ימינה):
- . שמאל {לצוף: שמאל}
- .right {float: right}
- .container: אחרי {content: ""; תצוגה: שולחן; ברור: שניהם;}
האפשרויות שלעיל הן הנפוצות ביותר, אם כי ישנן מספר וריאציות. אתה תמיד יכול למצוא את הדרך הקלה והנוחה ביותר ליצור דגימות פסאודו על ידי ניסויים.
סוגיה אחרת נתקלה לא פעםאותיות אותיות, - יישור של אלמנטים בלוק הקו. אחרי כל אחד מהם מתווסף אוטומטית רווח. נכס השוליים, המוגדר ככניסה שלילית, עוזר להתמודד עם זה. ישנן דרכים אחרות המשמשות בתדירות נמוכה הרבה יותר: לדוגמה, איפוס גודל הגופן. במקרה זה, גודל הגופן: 0 מוגדר בתכונות של אלמנט האב. אם הטקסט ממוקם בתוך הבלוקים, גודל הגופן הרצוי כבר הוחזר בתכונות של אלמנטים בלוק הקו. לדוגמה, גודל גופן: 1em. השיטה לא תמיד נוחה, לכן, לעתים קרובות יותר משתמשים באפשרות עם כניסה.
יישור בלוקים מאפשר ליצור דפים יפים ופונקציונליים: זהו פריסת הפריסה הכללית, ומיקום הסחורה בחנויות מקוונות, ותצלומים באתר כרטיס ביקור.
