توسيط النص شاقولياً

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

لذا أحببت قبل أن أدخل في موضوع هذا الدرس، أن أبدأ باعتذار لمتابعينا (برغم قلتهم) لهذا الانخفاض في الأداء، ووعد بالعودة للمستوى المعهود وتحسينه في أقرب فرصة، نقدّر دعمكم، وتهمنا آراؤكم ومشاركاتكم.

بالعودة لموضوع الدرس، فالعنوان يشرح نفسه. حيث كان توسيط النص شاقولياً أمراً سهلاً عندما كنا نستخدم جداول HTML لبناء الصفحات، ولكن سنجد بعد قليل بأن الموضوع لا يزال بنفس السهولة تقريباً عند استخدام CSS.

قبل أن نبدأ: لا بد أنك قد جربت استخدام خاصية vertical-align بالقيمة middle ووجدت أنها لن تعمل كما توقعت، إذا كنت ترغب بمعرفة السبب يمكنك أن تفرغ بضع ساعات من وقتك لقراءة توصيف W3C، لكن من يملك الوقت لذلك؟

توسيط سطر واحد شاقولياً

هذه حلها سهل، كل ما يجب فعله في CSS هو إعطاء الارتفاع (height) وارتفاع السطر (line-height) نفس القيمة، كما يلي:

.single {
    height: 100px;
    line-height: 100px;
}

وبهذا نحصل على ما نريد:

توسيط أكثر من سطر شاقولياً

أعتقد أنك تستطيع تخيل المشكلة في الحل السابق، فعندما يلزمنا أكثر من سطر ستظهر لنا أسطر بينها فراغات كبيرة غير مرغوبة. الحل ينبع من الطريقة المنقرضة (استخدام جداول HTML) بنقلها إلى CSS.

يلزمنا أولاً عنصرا HTML متداخلان كما يلي:

<div class="bubble">
    <p>Text...</p>
</div>

نقوم بعدها بتطبيق بنية جدول بإعطاء خاصية display قيمة table للعنصر الخارجي و table-cell للعنصر الداخلي مع استخدام vertical-align بالقيمة middle:

.bubble {
    display: table;
    height: 200px;
    width: 100%;
}
.bubble p {
    display: table-cell;
    vertical-align: middle;
}

وبذلك يتم الحل، لكن التجربة ستظهر أنه لا يعمل في ما قبل الإصدار الثامن من متصفح Internet Explorer. في حال رغبت بدعم الإصدارات القديمة من هذا المتصفح فالحل الأكثر تماسكاً يكون بإحاطة وسم <p> بوسم <div> وإضافة التنسيقات التالية ضمن تعليق شرطي:

<!--[if lt IE 8]>
<style>
.bubble div { position: absolute; top:50%;}
.bubble div p {position: relative; top: -50%}
</style>
<![endif]–>

ملاحظة أخيرة

عند تطبيق بنية جدول باستخدام CSS، فالعنصر سيتصرف كجدول فعلاً، لذا أعطينا خاصية width قيمة 100% للمحدد bubble.

يمكنك استعراض هذا المثال والاطلاع على نصه المصدري لفائدة مضافة.

المصدر: Vertically Center Multi-Lined Text

محمود الدعاس

من مواليد دمشق. ابتدأ بعد التخرج كمبرمج ويب عام 2005 مع شركة إيميا، انتقل بعدها إلى شركة تكنوليد للأتمتة المتكاملة ومنها إلى شقيقتها أتمتة للحلول المتقدمة كمصمم غرافيك ومصمم ومطور ويب. أسس مع مجموعة من زملاء الدراسة موقع HOMELESS-PRO.com لنشر قصص مصورة باللغة العربية للشباب، و Guestra كوكالة تصميم وتطوير.

مواضيع الكاتبموقع الكاتب

لمتابعة الكاتب:
TwitterFacebookPinterest

3 thoughts on “توسيط النص شاقولياً

أضف تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *