توسيط النص عموديًا في Div باستخدام CSS

تقنيات CSS المتقدمة للتوسيط العمودي

في النص الثالث، نستخدم طريقة عرض الجدول. جلسة display: table; على الحاوية و display: table-cell; على عنصر زائف تم إنشاؤه باستخدام ::before يسمح لنا باستخدام vertical-align: middle; ملكية. تحاكي هذه الطريقة سلوك خلايا الجدول، مما يجعل من الممكن توسيط المحتوى عموديًا. على الرغم من أن هذا الأسلوب أقل شيوعًا في تصميم الويب الحديث، إلا أنه قد يكون مفيدًا للحفاظ على التوافق مع المتصفحات القديمة أو عند التعامل مع التعليمات البرمجية القديمة. فهو يوفر طريقة موثوقة لتوسيط المحتوى دون الاعتماد على أنظمة التخطيط الأحدث.

يستخدم المثال البرنامج النصي الرابع line-height ملكية. من خلال تعيين line-height مساويًا لارتفاع الحاوية، يتم توسيط النص عموديًا. هذه التقنية واضحة وفعالة للنص المكون من سطر واحد. ومع ذلك، قد لا يكون مناسبًا للنص متعدد الأسطر أو المحتوى الديناميكي حيث قد يتغير ارتفاع الحاوية. وعلى الرغم من محدودياته، فإن line-height تعد هذه الطريقة حلاً سريعًا وسهلاً لتوسيط النص عموديًا في سيناريوهات بسيطة.

استخدام Flexbox للتوسيط العمودي

CSS فليكس بوكس

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  display: flex;
  justify-content: center;
  align-items: center;
}
<div id="box">Lorem ipsum dolor sit</div>

استخدام الشبكة للتوسيط العمودي

شبكة CSS

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  display: grid;
  place-items: center;
}
<div id="box">Lorem ipsum dolor sit</div>

استخدام عرض الجدول للتوسيط العمودي

عرض جدول CSS

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  display: table;
}
#box::before {
  content: "";
  display: table-cell;
  vertical-align: middle;
}
#box > div {
  display: inline-block;
  vertical-align: middle;
}
<div id="box"><div>Lorem ipsum dolor sit</div></div>

استخدام ارتفاع الخط للتوسيط العمودي

ارتفاع خط CSS

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  line-height: 170px;
  text-align: center;
}
<div id="box">Lorem ipsum dolor sit</div>

أسئلة شائعة حول التمركز العمودي في CSS

1. ما هي أسهل طريقة لتوسيط النص عموديًا في div؟
2. استخدام display: flex; مع justify-content: center; و align-items: center; غالبًا ما تكون الطريقة الأسهل والأكثر فعالية.
3. كيف يمكنك توسيط النص عموديًا في المتصفحات القديمة؟
4. استخدام طريقة عرض الجدول مع display: table; و vertical-align: middle; يمكن أن يساعد في تحقيق التوسيط العمودي في المتصفحات القديمة.
5. هل يمكن استخدام CSS Grid لتوسيط النص عموديًا؟
6. نعم، يمكن لـ CSS Grid توسيط النص عموديًا باستخدام display: grid; و place-items: center;.
7. هل من الممكن توسيط النص متعدد الأسطر عموديًا؟
8. نعم، يمكن أن يؤدي استخدام Flexbox أو CSS Grid إلى توسيط النص متعدد الأسطر رأسيًا بسهولة داخل الحاوية.
9. كيف يمكنك توسيط النص عموديًا بارتفاع حاوية معروف؟
10. يمكنك ضبط line-height خاصية تتناسب مع ارتفاع الحاوية، مما يؤدي إلى توسيط النص بشكل فعال.
11. ماذا لو كان ارتفاع الحاوية ديناميكيًا؟
12. باستخدام Flexbox أو الشبكة أو transform تضمن الخاصية توسيطًا رأسيًا ثابتًا، حتى مع ارتفاعات الحاوية الديناميكية.
13. هل هناك أي عيوب لاستخدام transform: translateY(-50%);؟
14. على الرغم من فعاليته، إلا أنه يتطلب أن يمتلكه الوالد position: relative; ويمكن أن يكون التنفيذ أكثر تعقيدًا قليلاً مقارنةً بـ Flexbox أو Grid.
15. كيف يمكنك توسيط النص عموديًا في تصميم سريع الاستجابة؟
16. يوصى بشدة باستخدام Flexbox أو CSS Grid للتصميمات سريعة الاستجابة، لأنها تتكيف بشكل جيد مع أحجام واتجاهات الشاشات المختلفة.

الأفكار النهائية حول التمركز العمودي

يمكن تحقيق التوسيط الرأسي للنص داخل div من خلال عدة طرق فعالة. توفر التقنيات الحديثة مثل Flexbox وGrid أكبر قدر من المرونة وسهولة التنفيذ. لا تزال الأساليب القديمة، مثل عرض الجدول وارتفاع الخط، مفيدة في حالات محددة. من خلال فهم هذه الأساليب المختلفة وتطبيقها، يمكن للمطورين التأكد من أن المحتوى الخاص بهم جذاب بصريًا ومتوافق بشكل صحيح عبر الأجهزة والمتصفحات المختلفة.