ضبط وتوسيط عناصر الترويسة (Header) عموديا باستخدام CSS

في بعض الأحيان تحتاج التصاميم شديدة البساطة إلى بنية معقدة وتطبيق مهارات مختلفة على التنسيق. توسيط العناصر، ضبط المحتوى و المحاذاة هي طرق غير كافية لجميع الحالات. أحد العيوب التي يمكن أن تسببها الطرق السابقة تكمن عند ضبط الترويسة بحيث يكون: العنوان على اليسار وقائمة التنقل على اليمين. في هذه الحالة من الشائع استخدام الخواص float ،position مع إعطاء القيمة absolute، كأسلوب آخر يمكن التفكير باستخدام الخصائص padding, margin ، حيث يوجد بالتأكيد عدة طرق وأساليب ولكن السؤال المهم هو: أي هذه الطرق مناسب عند عمل تصميم متوافق مع جميع أجهزة العرض "responsive" ؟ فبعض الطرق تعطي نتائج جيدة على الشاشات كبيرة الحجم ولكنها تؤدي إلى نتائج غير مرغوبة في الشاشات الصغيرة.

ضمن هذا الدرس سنظهر كيفية توسيط عناصر الترويسة (أو أي عنصر آخر) وضبطها بشكل عمودي/شاقولي وباستخدام أشباه العناصر pseudo-elements فقط. وبدون استخدام الخصائص float أو absolute. وذلك للحصول على نتيجة مشابهة للتالي :

شيفرة HTML لهذا المثال بسيطة جدا وهي :

<header>
    <h1>Super Bad</h1>
    <nav>
        <a>First Link</a>
        <a>Second Link</a>
        <a>Third Link</a>
    </nav>
</header>

سنقوم بتطبيق بعض التنسيقات على هذه الترويسة لإعطائها ارتفاعًا ثابتًا وبعض الحشوة padding كما نقوم بإعطاء الخاصية text-align القيمة justify وذلك لضبط العناصر داخل الترويسة:

header {
   text-align: justify;
   letter-spacing: 1px;
   height: 8em;
   padding: 2em 10%;
   background: #2c3e50;
   color: #fff;
}

وفقاً للنتيجة المطلوب الوصول إليها، يجب أن يظهر كلً من العنوان وقائمة التنقل على سطر واحد، سنقوم بعمل هذا بدون استخدام float أو position إنما عبر تطبيق القيمة inline-block كالتالي :

header h1,
header nav {
   display: inline-block;
}

في الواقع فإن الخاصية text-align:justify والتي من شأنها أن تجعل العنوان على اليسار وقائمة التنقل على اليمين، فإنها لن تعطي النتيجة المرجوة منها بوجود الخاصية الأخرى inline-block إلا إذا كانت محتويات العنصر أكبر من العنصر نفسه، أي حدوث طفحان overflow وهذا غير موجود في مثالنا الحالي، لذلك نقوم استخدام شبه عنصر pseudo-element وذلك عبر استخدام الصنف after:: على الترويسة وظهوره معها ضمن نفس السطر عبر الخاصية inline-block وضمان حدوث الطفحان عبر الخاصية width: 100% :

header::after {
   content: '';
   display: inline-block;
   width: 100%;
}

لغاية الآن نكون قد حصلنا على النتيجة التالية.

حتى الآن تمكنا من الحصول على العناصر مرتبة بأسلوب صحيح بشكل أفقي وبدون استخدام الخصائص float أو absolute ولكن ما نرغب به زيادةً على هذا هو تطبيق التوسيط عمودياً، وهي حقيقة من المشاكل التي تواجه مطوري الويب بشكل مستمر (توسيط المحتوى عمودياً)، يوجد بالتأكيد عدة حلول ومن الشائع استخدام الخصائص margin،line-height أو حتى absolute. ولكن دعنا نناقش طريقة أفضل.

بدايةً لو قمنا بإعطاء الخاصية vertical-align: top إلى قائمة التنقل فإننا سنلاحظ أن جميع عناصر القائمة ستتحرك إلى الأعلى وبالتحديد إلى بداية قسم الترويسة وهذا طبيعي إلى الآن (معاينة).

الآن إذا قمنا بإعطاء ارتفاع الترويسة القيمة 100% فيصبح بإمكاننا توسيط عناصر قائمة التنقل عبر استخدام الخاصية vertical-align: middle نحصل على هذا.

ولكن كيف يمكن توسيط جميع عناصر الترويسة عموديا ؟ يكمن الحل بإضافة عنصر جديد وإعطائه ارتفاع 100% وذلك لنضمن عمل المحاذاة العمودية بالشكل الصحيح ، حيث سنلجأ إلى استخدام شبه عنصر نطبق عليه هذه الخاصية لنضمن توسيط باقي العناصر والحصول على النتيجة المرجوة، هذا الأسلوب تم شرحه من قبل Michal Czernow.

وبالتالي يكون تنسيق CSS :

header h1 {
   height: 100%;
}

header h1::before {
   content: '';
   display: inline-block;
   vertical-align: middle;  
   height: 100%;
}

وبالتالي نحصل على النتيجة المطلوبة.

كما يبدو فإننا حصلنا على النتيجة المطلوبة ولكن علينا أن نتأكد من أمرين اثنين :

1. Line-breaks : أي النتيجة التي ستظهر في حال النص الطويل والنزول لأكثر من سطر.
2. Responsiveness : أي توافقية العرض على جميع الأجهزة للحصول على نفس النتيجة المطلوبة.

لنبدأ بالنقطة الأولى: في حال كان العنوان يمتد على أكثر من سطر، عندئذ سيتم دفعه إلى الأسفل وهذا تصرف منطقي على اعتبار أن ارتفاع العنصر الوهمي هو 100%، أنظر هذا المثال.

لحل هذه المسألة دعنا بالبداية نضع العنوان ضمن عنصر div خاص به:

<header>
    <div>
        <h1>Super Bad</h1>
    </div>

    <nav>
        <a>First Link</a>
        <a>Second Link</a>
        <a>Third Link</a>
    </nav>
</header>

وبالتالي تطبيق شبه عنصر على هذه الفقرة الجديدة كالتالي:

header {
   text-align: justify;
   height: 15em;
   padding: 2em 5%;
   background: #2c3e50;
   color: #fff;
}

header::after {
   content: '';
   display: inline-block;
   width: 100%;
}

header > div,
header nav,
header div h1 {
   display: inline-block;
   vertical-align: middle;
}

header > div {
   width: 50%;
   height: 100%;
   text-align: left;
}

header > div::before {
   content: '';
   display: inline-block;  
   vertical-align: middle;
   height: 100%;
}

وبالتالي الحصول على هذه النتيجة.

ننتقل الآن إلى النقطة الثانية وهي التوافق مع جميع أجهزة العرض. يمكن على سبيل المثال عدم تعريف ارتفاع الترويسة وإعطاء حشوة padding لجميع العناصر الداخلية للحصول على الارتفاع المطلوب. في هذه الحالة لن نحتاج إلى العنصر div الذي تم إضافته مسبقا ويكون تنسيق CSS كالتالي :

header {
   text-align: justify;
   padding: 2em 5%;
   background: #2c3e50;
   color: #fff;
}

header::after {
   content: '';
   display: inline-block;
   width: 100%;
}

header h1,
header nav {
   display: inline-block;
   vertical-align: middle;
}

header h1 {
   width: 50%;
   text-align: left;
   padding-top: 0.5em;
}

header nav {
   padding-top: 1em;
}

ونحصل على هذه النتيجة.

وبالتالي نكون قد حصلنا على النتيجة المطلوبة، أما في حال رغبت بتحديد ارتفاع الترويسة عندئذ يجب إعادة استخدام العنصر div والاستعانة بـ media query من أجل الشاشات الصغيرة، ويصبح تنسيق CSS كالتالي:

@media screen and (max-width: 820px){
   header {
       height: auto;
   }

   header > div,
   header > div h1,
   header nav {
       height: auto;
       width: auto;
       display: block;
       text-align: center;
   }
}

وتكون النتيجة مشابهة لهذه.

ملاحظة:  إن ترغب بجعل هذا المثال يعمل بشكل صحيح على المتصفح انترنت اكسبلورر 8 فيجب استخدام ":" عوضا عن "::" ضمن العناصر والفئات الوهمية، حيث يكون تنسيق CSS كاملا كالتالي :

@import url(http://fonts.googleapis.com/css?family=Lato:400,700italic);

* { padding: 0; margin: 0; }

body { 
    background: #1abc9c; 
    font-family: 'Lato', sans-serif; text-transform: uppercase; 
    letter-spacing: 1px;
}

header {
   text-align: justify;
   height: 8em;
   padding: 2em 5%;
   background: #2c3e50;
   color: #fff;
}

header::after {
   content: '';
   display: inline-block;
   width: 100%;
}

header > div,
header > div::before,
header nav,
header > div h1 {
   display: inline-block;
   vertical-align: middle;
   text-align: left;
}

header > div {
   height: 100%;
}

header > div::before {
   content: '';
   height: 100%;
}

header > div h1 {
   font-size: 3em;
   font-style: italic;
}

header nav a {
   padding: 0 0.6em;
   white-space: nowrap;
}

header nav a:last-child {
   padding-right: 0;
}

@media screen and (max-width: 720px){
   header {
      height: auto;
   }

   header > div,
   header > div h1,
   header nav {
       height: auto;
       width: auto;
       display: block;
       text-align: center;
   }
}

والنتيجة ستبدو كهذه.

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

ترجمة -وبتصرّف- للدّرس  Justified and Vertically Centered Header Elements لكاتبه Mary Lou 

جميع حقوق المقال محفوظة لموقع codrops.