מה צריך לדעת
- כדי למרכז טקסט, השתמש בקוד הבא ("[/]" מציין מעבר שורה): .center {[/] text-align: center; [/] }.
- מרכז גושי תוכן עם הקוד הבא ("[/]" מציין מעבר שורה): .center {[/] margin: auto; [/] רוחב: 80em; [/] }.
- לריכוז תמונה ("[/]" מציין מעבר שורה): img.center {[/] display: block; [/] שוליים-שמאל: אוטומטי; [/] שוליים-ימניים: אוטומטי; [/] }.
CSS היא הדרך הטובה ביותר למרכז אלמנטים, אך זה יכול להוות אתגר עבור מעצבי אתרים מתחילים מכיוון שיש כל כך הרבה דרכים להשיג זאת. מאמר זה מסביר כיצד להשתמש ב- CSS למרכז טקסט, גושי טקסט ותמונות.
מרכז טקסט עם CSS
עליך לדעת מאפיין סגנון אחד בלבד כדי למרכז טקסט בעמוד:
.center {
יישור טקסט: מרכז;
}
בשורה זו של CSS, כל פיסקה שנכתבה עם הכיתה .center תהיה מרוכזת אופקית בתוך אלמנט האב שלה. לדוגמא, פסקה בתוך חלוקה (ילד מאותה חלוקה) תהיה מרוכזת אופקית בתוך.
הנה דוגמה למחלקה זו המיושמת במסמך ה- HTML:
הטקסט הזה מרוכז.
כשמרכזים טקסט עם המאפיין יישור טקסט, זכרו שהוא יהיה מרוכז בתוך האלמנט המכיל שלו ולאו דווקא במרכז העמוד המלא עצמו.
הקריאות היא תמיד המפתח כשמדובר בטקסט האתר. גָדוֹל
גושי טקסט מוצדק במרכז יכול להיות קשה לקריאה, לכן השתמש בסגנון זה במשורה. כותרות וגושי טקסט קטנים, כגון טקסט טיזר למאמר, הם בדרך כלל קלים לקריאה כאשר הם מרוכזים; עם זאת, גושי טקסט גדולים יותר, כמו מאמר מלא, יהיו מאתגרים לצרוך אם הם מוצדקים לחלוטין.מרכז בלוקים של תוכן באמצעות CSS
גושי תוכן נוצרים באמצעות ה- HTML.
.center {
שוליים: אוטומטי;
רוחב: 80em;
}
תמצית CSS זו עבור מאפיין השוליים תקבע את השוליים העליונים והתחתונים לערך 0, ואילו השמאל והשמאל ישתמשו ב"אוטומטי ". זֶה למעשה לוקח כל שטח זמין ומחלק אותו באופן שווה בין שני צדי חלון הנוף, ובכך מרכז את האלמנט על העמוד.
כאן הוא מוחל ב- HTML:
כל הבלוק הזה מרוכז,אבל הטקסט בתוכו מיושר לשמאל.
כל עוד יש לחסום שלך רוחב מוגדר, הוא ירכז את עצמו בתוך האלמנט המכיל. הטקסט הכלול באותה בלוק לא יהיה מרוכז בתוכו אלא יהיה מוצדק משמאל. הסיבה לכך היא שהטקסט מוצדק משמאל כברירת מחדל בדפדפני האינטרנט. אם אתה רוצה שהטקסט יהיה מרוכז גם כן, תוכל להשתמש במאפיין יישור הטקסט שכוסה קודם לכן בשילוב עם שיטה זו כדי למרכז את החלוקה.
מרכז תמונות באמצעות CSS
למרות שרוב הדפדפנים יציגו תמונות שבמרכזן אותו מאפיין יישור טקסט, הדבר אינו מומלץ על ידי W3C. לכן, תמיד יש סיכוי שגרסאות עתידיות של דפדפנים יוכלו לבחור להתעלם משיטה זו.
במקום להשתמש ביישור טקסט כדי למרכז תמונה, עליך לומר לדפדפן במפורש שהתמונה היא אלמנט ברמת הבלוק. בדרך זו תוכלו למרכז אותו כמו בכל חסימה אחרת. הנה CSS בכדי לגרום לזה לקרות:
img.center {
בלוק תצוגה;
שוליים-שמאל: אוטומטי;
שוליים מימין: אוטומטי;
}
והנה ה- HTML שלמרכז התמונה:
אתה יכול גם למרכז אובייקטים באמצעות CSS מוטבע (ראה להלן), אך גישה זו אינה מומלצת מכיוון שהיא מוסיפה סגנונות חזותיים לסימון ה- HTML שלך. זכרו, הסגנון והמבנה צריכים להיות נפרדים; הוספת סגנונות CSS ל- HTML תפר את ההפרדה, וככזו עליכם להימנע מכך במידת האפשר.
מרכז אלמנטים אנכית באמצעות CSS
מרכז אובייקטים אנכית תמיד היה מאתגר בעיצוב אתרים, אך שחרורו של מודול פריסת תיבה גמישה של CSS ב- CSS3 מספק דרך לעשות זאת.
יישור אנכי פועל באופן דומה ליישור אופקי המכוסה לעיל. מאפיין CSS מיושר אנכית, כך:
.vcenter {
יישור אנכי: אמצעי;
}
כל הדפדפנים המודרניים תומכים בסגנון CSS זה. אם יש לך בעיות בדפדפנים ישנים יותר, ה- W3C ממליץ למרכז טקסט אנכית במיכל. לשם כך, הצב את האלמנטים בתוך אלמנט מכיל, כגון a div, וקבע עליו גובה מינימלי. הכריז על האלמנט המכיל כתא טבלה, והגדר את היישור האנכי ל"אמצע ".
לדוגמה, הנה ה- CSS:
.vcenter {
גובה דקות: 12em;
תצוגה: תא תא;
יישור אנכי: אמצעי;
}
והנה ה- HTML:
טקסט זה מרוכז אנכית בתיבה.
אל תשתמש באלמנט HTML למרכז תמונות וטקסט; הוצא משימוש, ודפדפני האינטרנט המודרניים כבר אינם תומכים בכך. זה, במידה רבה, תגובה להפרדה ברורה של HTML5 בין מבנה וסגנון: HTML יוצר מבנה, ו- CSS מכתיב סגנון. מכיוון שהמרכז הוא מאפיין ויזואלי של אלמנט (איך זה נראה ולא מה זה), הסגנון הזה מטופל באמצעות CSS, ולא HTML. השתמש במקום זאת ב- CSS כך שהדפים שלך יופיעו כראוי ותואמים לתקנים מודרניים.
מרכז אנכי וגרסאות ישנות יותר של Internet Explorer
אתה יכול להכריח את Internet Explorer (IE) למרכז ואז להשתמש בתגובות מותנות כך שרק IE יראה את הסגנונות, אך הם מעט מילוליים ולא מושכים. החלטת מיקרוסופט משנת 2015 לסלק את התמיכה ב גרסאות ישנות יותר של IEעם זאת, יהפוך את זה ללא בעיה כאשר IE ייצא מכלל שימוש.