תיעוד HTML עם דוגמאות להרצה: מרכוז טקסט

Q: איך ממרכזים טקסט ב-HTML?

הוסיפו text-align: center לאלמנט שמכיל את הטקסט, למשל או כלל CSS כמו h1 { text-align: center; }. הוא ממרכז כל שורת טקסט וכל תוכן inline בתוך האלמנט.

Q: איך ממרכזים טקסט אנכית?

הפכו את המכל ל-flex: display: flex; align-items: center; (הוסיפו justify-content: center כדי למרכז גם אופקית). לשורה אחת בתיבה בגובה קבוע, line-height ששווה לגובה גם עובד.

Q: האם התגית עדיין תקינה?

לא. והמאפיין align="center" מיושנים. דפדפנים עדיין מציגים אותם בשביל עמודים ישנים, אבל קוד חדש צריך להשתמש ב-text-align: center ב-CSS.

Q: איך מזיחים טקסט ב-HTML?

השתמשו ב-CSS. text-indent: 2em מזיח את השורה הראשונה של פסקה, ו-padding-inline-start: 2em או margin-inline-start: 2em מזיחים את כל הבלוק. רווחים או בטקסט אינם הזחה אמינה.

איך ממרכזים טקסט ב-HTML

השתמשו במאפיין ה-CSS text-align: center על האלמנט שמחזיק את הטקסט:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Center text</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    h1 { text-align: center; }
    .center { text-align: center; }
  </style>
</head>
<body>
  <h1>A centered heading</h1>
  <p class="center">This paragraph is centered with a class.</p>
  <p style="text-align: center">This one uses an inline style.</p>
  <p>This paragraph is not centered.</p>
</body>
</html>

text-align ממרכז כל שורה בתוך האלמנט, כולל דברים inline כמו קישורים, תמונות וכפתורים. הוא עובר בירושה, כך שהגדרה שלו על מכל ממרכזת את הטקסט בכל מה שבתוכו.

שימו אותו על הבלוק, לא על ה-span

text-align עובד על מכלי בלוק: <p>, <div>, כותרות, תאי טבלה. על <span> או <a> הוא לא עושה כלום, כי אלמנט inline רחב רק כמו הטקסט שלו ואין מקום למרכז בתוכו:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>text-align on inline</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    div { border: 2px solid #e5e7eb; margin-bottom: 8px; padding: 4px; }
    .on-span span { text-align: center; background: #fef3c7; }
    .on-div { text-align: center; border-color: #16a34a; }
    .on-div span { background: #dcfce7; }
  </style>
</head>
<body>
  <div class="on-span"><span>text-align on the span: no effect</span></div>
  <div class="on-div"><span>text-align on the parent div: centered</span></div>
</body>
</html>

התיקון תמיד זהה: העבירו את text-align: center לבלוק ההורה.

למרכז את הבלוק, ליישר את השורות להתחלה

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Centered column</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    .column { max-width: 320px; margin-inline: auto; border: 2px dashed #2563eb; padding: 8px; }
    .column h2 { text-align: center; margin-top: 0; }
  </style>
</head>
<body>
  <div class="column">
    <h2>Centered title</h2>
    <p>This column sits in the middle of the page, but its lines of text start at the same edge, which keeps longer text easy to read.</p>
  </div>
</body>
</html>

margin-inline: auto ממרכז בלוק שיש לו רוחב, ו-text-align ממרכז את השורות שבתוכו. מרכוז של תיבות (עם flexbox, grid או שוליים) מוסבר בעמוד מרכוז div.

מרכוז טקסט אנכית

text-align עובד רק אופקית. כדי למרכז טקסט אנכית בתוך תיבה, הפכו את התיבה למכל flex:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Vertical center</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .box { height: 140px; background: #e5e7eb; border-radius: 8px; margin-bottom: 12px; }
    .flex { display: flex; align-items: center; justify-content: center; text-align: center; }
    .single { height: 60px; line-height: 60px; text-align: center; background: #dbeafe; border-radius: 8px; }
  </style>
</head>
<body>
  <div class="box flex">Centered both ways<br>with flexbox</div>
  <div class="single">One line with line-height</div>
</body>
</html>

align-items: center ממרכז אנכית, justify-content: center ממרכז אופקית, ו-text-align: center עדיין ממרכז את השורות זו ביחס לזו כשיש כמה. הטריק של line-height עובד רק לשורת טקסט אחת בתיבה בגובה ידוע.

כל הערכים של text-align

ערך	תוצאה
`start` (ברירת מחדל)	השורות מתחילות בקצה ההתחלה: שמאל באנגלית, ימין בערבית ובעברית
`end`	השורות מסתיימות בקצה הסוף
`center`	השורות ממורכזות
`justify`	השורות נמתחות עד שני הקצוות (חוץ מהשורה האחרונה)
`left`, `right`	תמיד שמאל או תמיד ימין, בלי קשר לשפה

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>text-align values</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    p { width: 260px; border: 2px solid #e5e7eb; padding: 4px; }
  </style>
</head>
<body>
  <p style="text-align: start">start: the default for most text.</p>
  <p style="text-align: end">end: lines hug the end edge.</p>
  <p style="text-align: justify">justify: the spaces between words stretch so every full line reaches both edges of the box.</p>
  <p dir="rtl" style="text-align: start">start in a right to left paragraph</p>
</body>
</html>

העדיפו start ו-end על פני left ו-right: הם מתהפכים אוטומטית בשפות מימין לשמאל, כפי שהתיבה האחרונה מראה.

התגית center הישנה

עמודים ישנים ממרכזים טקסט עם <center> או עם מאפיין align:

<center>Old way</center>
<p align="center">Also old</p>

שניהם מיושנים. דפדפנים עדיין מציגים אותם כדי שאתרים ישנים לא יישברו, אבל הם לא תקינים ב-HTML הנוכחי ומערבבים פריסה בתוך הקוד. השתמשו ב-text-align: center ב-CSS.

הזחת טקסט

ב-HTML אין תגית הזחה, ורווחים שמוקלדים מתכווצים (ראו רווחים ב-HTML). הזחות הן CSS:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Indent</title>
  <style>
    body { font-family: system-ui, sans-serif; max-width: 420px; }
    .first-line { text-indent: 2em; }
    .block { padding-inline-start: 2em; border-inline-start: 3px solid #2563eb; }
    .hanging { padding-inline-start: 2em; text-indent: -2em; }
  </style>
</head>
<body>
  <p class="first-line">text-indent moves only the first line of the paragraph, the way books start a new paragraph. The following lines start at the edge.</p>
  <p class="block">padding-inline-start indents every line of the block.</p>
  <p class="hanging">A hanging indent: the first line sticks out and the rest is indented, as in a bibliography entry.</p>
</body>
</html>

הזחה	CSS
רק השורה הראשונה	`text-indent: 2em`
כל הבלוק	`padding-inline-start: 2em` או `margin-inline-start: 2em`
הזחה תלויה (השורה הראשונה בולטת החוצה)	`padding-inline-start: 2em; text-indent: -2em`

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

טעויות נפוצות

text-align על אלמנט inline. שימו אותו על הבלוק ההורה.
ציפייה ש-text-align ימרכז תיבה. הוא ממרכז טקסט ותוכן inline, לא בלוק עם רוחב. השתמשו ב-margin-inline: auto או ב-flexbox לתיבות.
שימוש ב-<center> או align="center". מיושן. השתמשו ב-CSS.
מרכוז של פסקאות ארוכות. מרכזו כותרות ושורות קצרות; השאירו את טקסט הגוף מיושר להתחלה.
הזחה עם   או רווחים. השתמשו ב-text-indent או בריפוד.

שאלות נפוצות

איך ממרכזים טקסט ב-HTML?

הוסיפו text-align: center לאלמנט שמכיל את הטקסט, למשל <p style="text-align: center"> או כלל CSS כמו h1 { text-align: center; }. הוא ממרכז כל שורת טקסט וכל תוכן inline בתוך האלמנט.

למה text-align: center לא עובד על ה-span שלי?

span הוא אלמנט inline, ולכן הוא רחב רק כמו הטקסט שלו ואין מקום למרכז בתוכו. שימו את text-align: center על הבלוק ההורה (ה-<p> או ה-<div> שסביבו), או הפכו את ה-span ל-display: block.

איך ממרכזים טקסט אנכית?

הפכו את המכל ל-flex: display: flex; align-items: center; (הוסיפו justify-content: center כדי למרכז גם אופקית). לשורה אחת בתיבה בגובה קבוע, line-height ששווה לגובה גם עובד.

האם התגית <center> עדיין תקינה?

לא. <center> והמאפיין align="center" מיושנים. דפדפנים עדיין מציגים אותם בשביל עמודים ישנים, אבל קוד חדש צריך להשתמש ב-text-align: center ב-CSS.

איך מזיחים טקסט ב-HTML?

השתמשו ב-CSS. text-indent: 2em מזיח את השורה הראשונה של פסקה, ו-padding-inline-start: 2em או margin-inline-start: 2em מזיחים את כל הבלוק. רווחים או   בטקסט אינם הזחה אמינה.

מושגים קשורים