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

أحد هذي الأفكار، تتضمن: التوسيط العمودي

في هذا الموضوع، راح أتكلم بشكل شامل عن هذه فكرة، وفوائدها، والمشاكل اللي تحلها.

بسم الله نبدأ،

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

لنفترض بأنني حاولت أصمم وأنسّق تبويبات (Tabs) بإستخدام الـ HTML والـ CSS.
علشان أوصل للنتيجة المرغوبة، راح أستخدم الشفرة التالية:

1
2
3
4
5
6
7
8
9
10
11
12
13

#tabs ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
 
#tabs li {
  padding: 3px 10px;      /* لوضع مسافات بين أطراف العنصر ومحتواه */
  margin: 0 0 0 2px;       /* لوضع مسافات بين كل عنصر، والعنصر الذي على يساره */
  float: right;
  background: #ccc;
  text-align: center;
}

1
2
3
4
5
6

<ul id="tabs">
	<li>رابط أول</li>
	<li>رابط ثاني</li>
	<li>رابط ثالث</li>
	<li>رابط رابع</li>
</ul>

وراح تكون النتيجة كالتالي:

طبعاً، ما راح أواجه أي مشكلة لو إستخدمت الشفرة السابقة، لأن نص الروابط راح يتم توسيطه عمودياً في الحاوي Container، والسبب أني حطيت قيمة التبطين Padding متساوية من الأعلى والأسفل.

المشكلة تتخثر لو جا على بالي أخلي إرتفاع التبويبات Tabs محدد، بإستخدام الخاصية height في الـCSS.

طيب السؤال،

وش يخليني أستخدم height دام أنها راح تسوي لي مشكلة؟ ليه ما أستمر بإستخدام التبطين Padding فقط؟
الجواب هو أنك لو إستخدمت التبطين Padding ما راح تعرف إرتفاع كل تبويب Tab، وراح تبني تصميمك على “التقريب” و”التلفيق” في المقاسات،

وهذا عيييييييييييب… كيف ترضى تلفّق؟؟؟

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

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

خلصنا تهزيء، نرجع للشغل…

فهمت الحين ليش لازم تستخدم height بدل padding ؟

النتيجة السيئة بإستخدام الـ height شفرتها ونتيجتها كالتالي:

7
8
9
10
11
12
13
14
15

#tabs li {
  padding: 0 10px;
  height: 35px;
  margin: 0 0 0 2px;
  float: right;
  background: #ccc;
  color: #333;
  text-align: center;
}

لاحظ بأن نص الروابط مرتفع فوق شوي، ومهو صاير في المنتصف، وهذي نتيجة غير مرضية.

طبعاً بإمكانك إضافة تبطين، وتجلس تلفق فيه إلى أن يصير في المنتصف، لكن لا تنسى أنك راح تضطر تقلل من قيمة height لأن إضافة التبطين، يؤثر على القيمة النهائية لإرتفاع العنصر.  كيف؟

لا تقول لي أنك ما تدري!!… ترى إرتفاع العنصر ما يتحدد بس بقيمة height.. لا لا يا حبيبي، إرتفاع العنصر يتأثر بأربعة أشياء، ألا وهي:

• قيمة الإرتفاع height
• قيمة الهامش margin
• قيمة التبطين padding
• قيمة الحدود border

يعني، لو عندك div قيم خصائصه كالتالي:

1
2
3
4
5
6

div {
  height: 10px;
  padding: 2px 0;
  margin: 1px 0;
  border: 1px solid #333;
}

إستناداً للكلام اللي مكتوب فوق، راح نستنتج أن إرتفاع الـ div بيكون: ١٨ بيكسل…!!

التفاصيل كالتالي:

• ١٠ بيكسل من قيمة height
• ٢ بيكسل من قيمة margin (١ فوق و ١ تحت)
• ٤ بيكسل من قيمة padding (٢ فوق و ٢ تحت)
• ٢ بيكسل من قيمة border (١ فوق و ١ تحت)

علشان كذا، لازم تتذكر هذا القانون لو شفت بيكسلات زايدة في تصميمك وقمت تبكي لأنك ما تعرف من وين جات.

الحل

الحل جداً بسيط، ولا يطري على البال، كيف؟
كل ما عليك فعله، هو إستخدام خاصية line-height للتبويب وإعطائها نفس قيمة height بالضبط.
الحل منطقي جداً، وهي جعل إرتفاع السطر يساوي إرتفاع الحاوي أو الـ Container، وبما أن النص دائماً ما يكون في وسط السطر اللذي هو عليه، إذاً سيكون في وسط السطر الذي هو عليه وإرتفاعه مثلاً ٣٥ بيكسل، هذا يعني بأنه سيكون في وسط الـ ٣٥ بيكسل… Bingo!!!

الشفرة راح تكون كالتالي:

7
8
9
10
11
12
13
14
15
16

#tabs li {
  padding: 0 10px;  /* لا نرغب بإضافة تبطين علوي أو سفلي حتى لا تتأثر القيمة المطلقة لإرتفاع التبويب */
  height: 35px;  /* إرتفاع التبويب المرغوب */
  line-height: 35px;  /* قيمة مطابقة لإرتفاع التبويب المرغوب */
  margin: 0 0 0 2px;
  float: right;
  background: #ccc;
  color: #333;
  text-align: center;
}

والنتيجة كالتالي:

على فكرتين

• تقدر تستخدم هذه الفكرة لحل مشاكل التوسيط العمودي للنصوص في أي حاوية بشرط يكون النص في سطر واحد فقط، ولا يمتد لأكثر من سطر.
• إستخدام الخاصية vertical-align لا يفي بالغرض، لأن هذه الخاصية مخصصة لتوسيط محتويات خلايا الجداول td و th

الختام

في نهاية هذه الحلقة، أتمنى أن أكون ما طولت عليكم، وتكون هذه الفكرة، مفيدة.. لا تنسى تحط بعض البهارات على التبويبات، مثل:

7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

#tabs li {
  padding: 0 10px;
  height: 35px;
  line-height: 35px;
  margin: 0 0 0 2px;
  float: right;
  background: #ccc;
  color: #333;
  text-align: center;
  -moz-border-radius-topleft: : 10px;           /* تدوير الزاوية العلوية اليسرى لمتصفح فايرفوكس */
  -moz-border-radius-topright: : 10px;        /* تدوير الزاوية العلوية اليمنى لمتصفح فايرفوكس */
  -webkit-border-top-left-radius: 10px;        /* تدوير الزاوية العلوية اليسرى لمتصفح سفاري وكروم */
  -webkit-border-top-right-radius: 10px;     /* تدوير الزاوية العلوية اليمنى لمتصفح سفاري وكروم */
  border: 1px solid #aaa;
}