מרכוז אלמנטים בדף באמצעות 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;
}

 

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

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

כיצד למרכז תמונה באמצעות css

הקוד יראה כך:

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

 

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

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

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

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

 

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

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

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

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

 

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

הוסף תגובה חדשה

 

= 6 + 7