טקסט מרכז HTML - כיצד לבצע CSS אנכי ליישר חלוקה

תִכנוּת

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

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

ראשית נלמד כיצד ליישר טקסט עם CSS.

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

ולבסוף נלמד כיצד נוכל להכניס טקסט ו- divיחד בתוך מיכל.

כיצד למרכז טקסט

ישנן דרכים רבות למרכז טקסט באמצעות CSS.

שימוש במאפיין Float

Float היא דרך קלה ליישר טקסט.

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

כדי למקם את הטקסט בצד שמאל, אנו משתמשים left, כמו float:left. עיין בדוגמה הבאה:

 .right { float: right; } .left { float: left; } // HTML Right Left

כדי למרכז את הטקסט באמצעות float נוכל להשתמש בו margin-leftאו margin-rightלהכין אותו   50%, כמו למטה.

 .center { float: left; margin-left: 50%; } /* HTML*/ Center

תוכל ללמוד עוד על השימושים Floatכאן.

באמצעות יישור טקסט

text-alignהיא דרך נוחה יותר וספציפית יותר ליישר טקסט. זה מאפשר לנו למקם את הטקסט על centerאו אל leftאו rightהצד, כפי שמראה הדוגמה הבאה:

.right { text-align: right; } .left { text-align: left; } .center { text-align: center; } /* HTML */ 
Right
Center
Left

למידע נוסף על text-align.

כיצד ליישר א div

ובכן, יש הרבה דרכים לעשות זאת.

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

Floatעושה את העבודה, אבל CSS נותן לנו אפשרויות טובות יותר ונוחות ואלגנטיות יותר. שמעתם על זה Flexbox? או css-grid?

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

פלקסבוקס  

Flexbox מציע דרך קלה ופשוטה ליישר a div- וזו השיטה המועדפת עלי עד כה לטיפול בפריסות ב- CSS (אני משתמש בה כל יום).

בואו נסתכל על מה היינו עושים Flexboxכדי לראות איך זה עובד על ידי יצירת מחדש את אותה דוגמה כמו לעיל.

הדוגמה:

הקוד:

      Flexbox  .container { display: flex; } .container div { width: 33%; height: 60px; } .left { background: yellow; } .right { background: red; } .center { background: lightblue; } Left div centered div right div

בואו נשבר את זה

  • אנחנו תמיד מגדירים div  הורה שמשתמש display:flexבבקשה Flexbox. אז אנו מאפשרים divלטפל בכל ילדי החטיבה בתוך ההורה באמצעות Flexboxנכסים.
  • השימוש   flex-directionמשתמש rowבכיוון כברירת מחדל, כלומר האלמנטים ימוקמו אנכית בתוך המכולה.
  • עם justify-contentהמאפיין נוכל ליישר divאת ילדיו של א 'לכיוונים שונים כמו הדוגמה הבאה:
.container{ display: flex: justify-content:center /* flex-start, flex-end, space-between, space-evenly, space-around etc */ }
  • justify-content:center  מציב את האלמנטים במרכז המכולה.
  • justify-content:flex-start שם את האלמנטים בתחילת המכולה משמאל.
  • justify-content:flex-end מציב אלמנטים בקצה המכולה בצד ימין.
  • justify-content:space-around גורם לאלמנטים להשתלב במיכל ומכניס פער שווה בין כל האלמנטים.
  • justify-content:space-evenly מפיץ את האלמנטים בתוך מיכל האב באותה מידה עם אותו רווח, ואותו רוחב.

הדוגמה לעיל חלה על כל ילדי האלמנטים כקבוצה.

דמיין אם היינו רוצים ליישר יחיד divבתוך המכולה. תמיד align-selfנוכל ליישר אלמנט יחיד.

.container div{ align-self:center /* can have: flex-start, or flex-end*/ }

אנו יכולים להחיל את אותו הדבר על טקסט Flexboxכמו בדוגמה הבאה:

  .right{ display: flex; align-items: flex-end; flex-direction: column; } right div

זהו ציוץ נהדר של ג'וליה אוונס שממחיש את הריכוז ב- CSS באופן כללי:

לעטוף

ישנן דרכים רבות למרכז אלמנטים ב- CSS. ותמיד תלמד דברים חדשים לאורך זמן ככל שתתרגל יותר ויותר.

אז אני ממליץ לך לעבוד על כמה דוגמאות ממה שלמדת היום כדי שזה ידבק.

  • אתה צריך לעקוב אחריי בטוויטר?
  • בדוק את Github שלי
  • בקר בבלוג שלי