בדף לעתים קרובות יש צורך להפוך את CSS-דרך יישור מרכז: למשל, כדי למרכז את היחידה הראשית.ישנם מספר פתרונות לבעיה זו, כל אחד מהם תהיה במוקדם או במאוחר יצטרכו להשתמש בכל המתכנת.
ליישר טקסט מרוכז
לעתים קרובות למטרות דקורטיביות אתה רוצה להגדיר את יישור הטקסט למרכז, CSS במקרה זה, מפחית את הזמן של הטלת.בעבר, זה נעשה באמצעות HTML-תכונות, עכשיו סטנדרטי דורש טקסט יישור באמצעות גיליונות סגנון.בניגוד לבלוק שבם אתה רוצה לשנות את השוליים החיצוניים, עם יישור טקסט CSS באמצע הוא עשה עם שורה אחת: יישור טקסט
- : מרכז;רכוש
זה עובר בירושה ועבר מהורה לכל הילדים.זה משפיע לא רק את הטקסט, אלא גם לגורמים אחרים.כדי לעשות זאת, הם חייבים להיות באותיות קטנות (למשל, אורך) או קו-בלוק (כל לוקים שמגדיר את תצוגת נכס: בלוק).האפשרות השנייה גם מאפשרת לך לשנות את הרוחב וגובה של תצורה גמישה יותר של הכניסה.
לעתים קרובות הדפים ליישר תכונה לתג עצמו.זה מייד הופך את הקוד חוקי כW3C הודה תכונת align מיושנת.השימוש בו אינו מומלץ בדף.בלוק יישור
במרכז
אם אתה רוצה לציין את היישור של מרכז div, CSS יכול להציע דרך קלה למדי: שימוש בשולי כניסה חיצוניים.ריפוד ניתן להגדיר כאלמנטים ברמת בלוק וקו-בלוק.Svoysva ערך צריך להיות מוגדר 0 (מסוכסך אנכי) ואוטומטי (כניסות אופקי אוטומטיות):
- שוליים: אוטומטי 0;
עכשיו אפשרות זו הוכרה כתקפה לחלוטין.שימוש בריפוד חיצוני גם מאפשר לכם להגדיר את היישור של המרכז: רכוש CSS-שוליים מאפשר לנו לפתור בעיות רבות הקשורות לאלמנט המיקום בדף.בלוק
יישר על הקצה השמאלי או ימני
לפעמים CSS-דרך יישור המרכז לא נדרש, אבל יש צורך לשים את שתי יחידות לצד אחד מצד שמאל ואחר - מהימין.נכס זה יש לצוף, אשר יכול לקחת אחד משלושה ערכים: שמאלה, ימינה, או כלל לא.נניח שיש לך שתי יחידות שצריכים להרכיב.אז הקוד יהיה:
- .left {float: עזב;} .right
- {float: right}
אם יש יחידה שלישית, אשר חייב להיות ממוקמת מתחת לשני בלוקים הראשונים (למשל, הכותרת התחתונה), הואאתה חייב לרשום את הנכס ברור:
- .left
- {float: עזב;} .right
- {float: right} תחתונה
- {ברור: שניהם} העובדה
שהלוקים עם שיעורי ימין ועל שמאל הנפילה מתוך סךלזרום, כלומר, כל אלמנטים האחרים התעלמו מקיומו של אלמנטים מיושרים.הרכוש ברור: שניהם מאפשר תחתונות או כל יחידה אחרת כדי לראות ירד מזרימת האלמנטים ואוסר לעטוף (לצוף) בצד השמאל וימין.לכן, בדוגמא שלנו, התחתונה יעבור למטה.יישור
אנכי
ישנם מקרים בהם CSS-דרכים יישור מרכז סט מספיק, אתה עדיין חייבת לשנות את המיקום האנכי של בלוק הילד.כל אלמנט קו או קו-בלוק ניתן נלחץ הקצה העליון או תחתון, ממוקם באמצע של אלמנט ההורה, או להיות בכל מקום.לעתים קרובות יותר דורש יישור של התיבה במרכז, תכונה זו משמשת אנכי יישור.נניח שיש שתי יחידות, אחד בתוך אחר.היחידה הפנימית - אלמנט קו-בלוק (תצוגה: מוטבע-גוש).זה הכרחי כדי ליישר את ילד היחידה אנכי: יישור
- על הגבול העליון - .child {אנכי ליישר: ראש};יישור
- מרכז - .child {אנכי ליישר: אמצע};יישור
- בקצה התחתון - .child {אנכי ליישר: תחתון};
על אלמנטים ברמת בלוק או יישור טקסט, או אנכי ליישר לא תחול.
בעיות אפשריות עם יחידות מיושרות
לפעמים div ליישר את מרכז CSS-הדרך יכולה לגרום לבעיות שוליות.לדוגמא, באמצעות מצוף: למשל, יש שלושה רחובות: .first, .second ו.third.בלוקים השני והשלישי נמצאים בראשון.אלמנט עם כיתה של בלוק מיושר לשמאל, והשנייה האחרונה - בצד הימין.לאחר יישור שני נפלו מהזרם.אם ההורה אינו מוגדר גובה (למשל, 30em), זה כבר לא למתוח את הגובה של יחידות חברה בת.כדי להימנע משגיאה זו, השתמש ב" spacer "- יחידה מיוחדת, הרואה .second ו.third.CSS-קוד:
- .second {float: שמאל} {float: right} .third
- {הגובה .clearfix
- : 0;ברור: שניהם; פסאודו}
משמש לעתים קרובות: לאחר, שגם מאפשר לך לחזור ללוקים למקום על ידי יצירת psevdorasporki (בדוגמא זו בdiv עם כיתה של מיכל נמצא בתוך .first ומכיל .left ו.right):
- .עזב {float: שמאל} .right
- {float: right} .container
- : לאחר {תוכן: '';תצוגה: שולחן;ברור: שניהם;}
מעל אפשרויות - הנפוצות ביותר, אם כי יש כמה וריאציות.אתה תמיד יכול למצוא את הדרך הקלה והנוחה ביותר ליצירת psevdorasporki על ידי ניסויים.
בעיה נוספת פריסה נתקלה לעתים קרובות - יישור של אלמנטי קו-בלוק.אחרי כל אחד מהם שטח נוסף באופן אוטומטי.כדי להתמודד עם הפער הזה רכוש עזרה, אשר מוגדר על ידי הכניסה השלילית.ישנן שיטות אחרות הנמצאים בשימוש בתדירות נמוכה יותר, למשל, איפוס גודל הגופן.במקרה זה, את המאפיינים של גודל הפונט ההורה שנקבע: 0.אם נמצא בתוך בלוקים של טקסט, את המאפיינים של רכיבי קו-בלוק חזרו לגודל הרצוי.לדוגמא, font-size: 1em.השיטה היא לא תמיד נוחה, כל כך הרבה יותר נפוצה אופציה עם שוליים חיצוניים.בלוק יישור
מאפשר לך ליצור פריסת דף יפה ופונקציונלית וזה המבנה הכללי ומיקום של מוצרים בחנויות, ותמונות באתר אינטרנט קטן.
