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

מרכז את הדברים הוא אחד ההיבטים הקשים ביותר של CSS.

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

השיטה בה אתה משתמש יכולה להשתנות בהתאם לאלמנט ה- HTML שאתה מנסה למרכז, או אם אתה מרכז אותו בצורה אופקית או אנכית.

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

כיצד למרכז אופקית

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

כיצד למרכז טקסט עם מאפיין מרכז יישור הטקסט של CSS

כדי למרכז טקסט או קישורים אופקית, פשוט השתמש text-alignבמאפיין עם הערך center:

Hello, (centered) World!

p { text-align: center; }

כיצד למרכז Div עם אוטומטי שוליים CSS

השתמש marginבמאפיין הקצר עם הערך 0 autoלמרכז אלמנטים ברמת הבלוק כמו divאופקי:

.child { ... margin: 0 auto; }

כיצד למרכז מפגש בצורה אופקית באמצעות Flexbox

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

כדי למרכז אלמנט אופקי עם flexbox, פשוט להחיל display: flexו justify-content: centerלאלמנט ההורה:

.container { ... display: flex; justify-content: center; }

כיצד למרכז אנכית

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

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

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

ראשית, הגדר את displayהמאפיין של אלמנט האב ל- relative.

אז עבור רכיב ילד, להגדיר את displayהנכס absoluteואת topאל 50%:

.container { ... position: relative; } .child { width: 50px; height: 50px; background-color: red; /* Center vertically */ position: absolute; top: 50%; }

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

כדי למרכז את אלמנט הילד באמת, הגדר את margin-topהנכס ל -(half the child element's height):

.container { ... position: relative; } .child { width: 50px; height: 50px; background-color: red; /* Center vertically */ position: absolute; top: 50%; margin-top: -25px; /* half this element's height */ }

כיצד למרכז Div בצורה אנכית באמצעות Transform and Translate

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

שיטה זו דומה מאוד לשיטת השוליים השליליים לעיל. הגדר את displayהמאפיין של רכיב האב ל- relative.

עבור רכיב הצאצא, הגדר את displayהמאפיין absoluteוהגדר topאותו 50%. עכשיו במקום להשתמש בשוליים שליליים כדי למקד באמת את אלמנט הילד, פשוט השתמש ב transform: translate(0, -50%):

.container { ... position: relative; } .child { ... position: absolute; top: 50%; transform: translate(0, -50%); }

שים לב כי translate(0, -50%)הוא קצר עבור translateX(0)ו translateY(-50%). אתה יכול גם לכתוב transform: translateY(-50%)למרכז את אלמנט הילד בצורה אנכית.

כיצד למקד Div בצורה אנכית באמצעות Flexbox

בדומה למרכז דברים בצורה אופקית, Flexbox מקל מאוד על מרכז הדברים בצורה אנכית.

כדי למרכז אלמנט אנכי, להחיל display: flexו align-items: centerלאלמנט ההורה:

.container { ... display: flex; align-items: center; }

כיצד למרכז גם אנכית וגם אופקית

כיצד למקד מחלקה אנכית ואופקית באמצעות מיקום מוחלט CSS ושוליים שליליים

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

הגדר את displayהמאפיין של רכיב האב ל- relative.

ואז להגדיר את הילד displayהנכס absolute, topכדי 50%, ועל leftמנת 50%. זה רק מרכז את הפינה השמאלית העליונה של אלמנט הילד בצורה אנכית ואופקית.

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

.container { ... position: relative; } .child { width: 50px; height: 50px; background-color: red; /* Center vertically and horizontally */ position: absolute; top: 50%; left: 50%; margin: -25px 0 0 -25px; /* apply negative top and left margins to truly center the element */ }

כיצד למקד מחלקה אנכית ואופקית באמצעות שינוי ותרגום

Use this method to center an element vertically and horizontally if you don't know its exact dimensions and can't use Flexbox.

First, set the display property of the parent element to relative.

Next, set the child element's display property to absolute, top to 50%, and left to 50%.

Finally, use transform: translate(-50%, -50%) to truly center the child element:

.container { ... position: relative; } .child { ... position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

How to Center a Div Vertically and Horizontally with Flexbox

Flexbox is the easiest way to center an element both vertically and horizontally.

This is really just a combination of the two previous Flexbox methods. Then apply justify-content: center and align-items: center to center the child element(s) horizontally and vertically:

.container { ... display: flex; justify-content: center; align-items: center; }

That's everything you need to know to center with the best of 'em. Now go forth and center all the things.