מרכוז אלמנטים בדף באמצעות CSS

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

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

טקסט ממרכזים בעזרת CSS, והתכונה text-align: center.

כך נראה הקוד:

.centered-text {    
  text-align: center;
}

גם טקסט בתוך טבלה מיישרים באותו אופן כשאת התכונה text-align מפעילים על התאים עצמם (td).

td{    
  text-align: center;     
}

מידע נוסף על יישור טקסט, ועיצוב פסקה ניתן למצוא במדריך עיצוב פסקה באתר "רשת-טק".

כיצד למרכז בלוקים?

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

.block_center {
  width: 300px;
  margin-right: auto;
  margin-left: auto;
}

כיצד למרכז תמונות?

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

הקוד יראה כך:

img {
  display:block;
  margin-right: auto;
  margin-left: auto; 
}

כיצד למרכז דף בעל רוחב קבוע?

מרכוז של כל תוכנו של הדף אינו שונה למעשה ממרכוז של בלוק. לפיכך, את התוכן נעטוף ב-div בעל מזהה (id) ייחודי. לדוגמה, id='main-wrapper', ונשתמש בזה בקוד שכבר השתמשנו בו עבור הבלוק:

#main-wrapper  {
  width: 600px;
  margin-right: auto;
  margin-left: auto;
}

כיצד למרכז דף שרוחבו מוגדר באחוזים?

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

#main-wrapper  {
  width: 50%;
  margin-right: 25%;
  margin-left: 25%;
}

במדריך הבא בסדרת ה-CSS תוכלו ללמוד על יישור אלמנטים בדף בציר האנכי

לכל מדריכי ה-CSS

אהבתם? לא אהבתם? דרגו!

0 הצבעות, ממוצע 0 מתוך 5 כוכבים