ממורכז: פריסת CSS

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

יישור טקסט למרכז

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

• text-align: center;

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

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

בלוק ממורכזים

אם אתה רוצה להגדיר את היישור של div באמצע, CSS יכול להציע דרך נוחה למדי: השימוש במרווח ריפוד חיצוני. ריפוד ניתן לציין את האלמנטים בלוק, וקו-גוש. ערך Svoysva צריך להיות 0 (ריפוד אנכי), אוטומטי (הזחה אוטומטית אופקית):

• margin: 0 auto;

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

יישור של הקצה השמאלי או הימני של הבלוק

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

• .left {float: עזבו;}
• .right {float: right}

אם יש חסימה שלישית, אשר חייב להיות ממוקמת מתחת לשני הגושי הראשון (למשל, הכותרת תחתונה), ואז יש צורך לרשום תכונה ברורה:

• .left {float: עזבו;}
• .right {float: right}
• תחתון {ברור: שניהם}

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

יישור אנכי

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

• יישור של הגבול העליון - .child {vertical-align: top};
• מרוכז - .child {vertical-align: באמצע};
• יישור של הקצה התחתון - .child {vertical-align: בתחתית};

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

בעיות אפשריות עם ביחידות מותאמות

לפעמים div align במרכז סטרי CSS יכול לגרום קצת צרות. לדוגמה, בעת שימוש float: למשל, ישנם שלושה רחובות: .first, .second ו .third. אבני השני והשלישי לשכב הראשון. אלמנט עם כיתה שנייה מיושר לשמאל, ואת הבלוק האחרון - מהימין. לאחר יישור שני ירד מן הנחל. אם אלמנט ההורה אינו מוגדר גובה (למשל, 30em), היא תחדל למתוח את הגובה של יחידות הבת. כדי למנוע שגיאה זו, להשתמש "spacer" - יחידה מיוחדת, הרואה .second ו .third. קוד CSS:

• .second {float: שמאל}
• .third {float: right}
• .clearfix {height: 0; ברור: שניהם;}

פסאודו המשמש לעתים קרובות: אחרי, אשר גם מאפשר להחזיר את אבני למקומו על ידי יצירת psevdorasporki (בדוגמה של div עם הכיתה שוכנת בתוך המכולה, כוללת .left .first ו .right):

• .left {float: שמאל}
• .right {float: right}
• .container: אחרי {content: ''; תצוגה: שולחן; ברור: שניהם;}

האפשרויות הנ"ל - הנפוצות ביותר, אם כי יש כמה וריאציות. אתה תמיד יכול למצוא את הדרך הקלה והנוחה ביותר ליצירת psevdorasporki ידי ניסויים.

בעיה נוספת נתקלה לעתים קרובות פריסה - יישור של אלמנטי קו-גוש. לאחר שכל אחד מהם מרחב מתווסף אוטומטית. טפל בו עוזר מאפיין השוליים, אשר מוגדר על ידי הזחה שלילית. ישנן דרכים אחרות, אשר משמשות בתדירות נמוכה יותר, למשל, לאפס את גודל הגופן. במקרה זה, את המאפיינים של אלמנט ההורה רושם font-size: 0. אם הממוקם בתוך גושי טקסט, את המאפיינים של אלמנטי קו-בלוק חזרו לגודל הגופן הרצוי. לדוגמה, font-size: 1em. השיטה היא לא תמיד נוח, אז זה הרבה יותר נפוץ גרסה עם שוליים חיצוניים.

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