נגישות       נגישות
שינוי גודל טקסט:
א א א
שינוי צבעי האתר:
? מקשי קיצור:

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

הפעלת מקשי הקיצור תלויה בדפדפן שבו אתם משתמשים.

Internet Explorer, Chrome ובגרסאות ישנות של Firefox: לחצו על מקש Alt ועל מקש המספר או האות על-פי הרשימה. ב Firefox 3 ומעלה: לחצו על המקשים Alt + Shift + המספר או האות.

S - עבור לתוכן הדף
L - חיפוש
1- עמוד הבית
2 - פרוייקטים
3 - מדריכים
4 - אודות
5 - צרו קשר
6 - הצהרת נגישות
 

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

מחבר:
בתאריך:

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

 

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

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

לדוגמה:

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

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

td{
    text-align: center;
}

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

ב-HTML4 (הגרסה הנוכחית של HTML) ניתן עדיין ליישר טקסט באמצעות התגיות <center>, אולם תגית זו מבוטלת החל מ-HTML5.

 

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

בלוקים או תיבות אילו אלמנטים שמופיעים בדף האינטרנט ויכולים להכיל תוכן מסוים. זה יכול להיות טקסט, תמונה, טופס וכיו"ב. כדי למרכז, ניתן לבלוק אורך קבוע (בפיקסלים ולא באחוזים), ונגדיר את השוליים הימניים והשמאליים ל-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

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

 

= 6 + 2