وثائق HTML قابلة للتشغيل: توسيط النص

Q: كيف أوسّط النص في HTML؟

أضف text-align: center إلى العنصر الذي يحتوي على النص، مثل أو قاعدة CSS مثل h1 { text-align: center; }. توسّط هذه الخاصية كل أسطر النص والمحتوى السطري داخل ذلك العنصر.

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 توسّط كل سطر داخل العنصر، بما في ذلك العناصر السطرية مثل الروابط والصور والأزرار. وهي خاصية موروثة، فضبطها على حاوية يوسّط النص في كل ما بداخلها.

ضعها على العنصر الكتلي لا على span

text-align تعمل على الحاويات الكتلية: <p> و<div> والعناوين وخلايا الجداول. على <span> أو <a> لا تفعل شيئًا، لأن عرض العنصر السطري بقدر نصه فقط فلا توجد مساحة للتوسيط داخله:

<!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 على عنصر سطري. ضعها على العنصر الكتلي الأب.
توقع أن توسّط text-align صندوقًا. هي توسّط النص والمحتوى السطري، لا كتلة لها عرض. استخدم margin-inline: auto أو flexbox للصناديق.
استخدام <center> أو align="center". مهجوران. استخدم CSS.
توسيط الفقرات الطويلة. وسّط العناوين والأسطر القصيرة، وأبقِ نص المحتوى محاذيًا إلى البداية.
الإزاحة بـ   أو بالمسافات. استخدم text-indent أو الحشو.

الأسئلة الشائعة

كيف أوسّط النص في HTML؟

أضف text-align: center إلى العنصر الذي يحتوي على النص، مثل <p style="text-align: center"> أو قاعدة CSS مثل h1 { text-align: center; }. توسّط هذه الخاصية كل أسطر النص والمحتوى السطري داخل ذلك العنصر.

لماذا لا تعمل text-align: center على span؟

span عنصر سطري، فعرضه بقدر نصه فقط ولا توجد مساحة للتوسيط داخله. ضع 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 يزيح الكتلة كلها. المسافات أو   داخل النص ليست إزاحة موثوقة.

مفاهيم ذات صلة