6 الحيل المغلق لمحاذاة المحتوى عموديا

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

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

1. استخدام المواقع المطلقة

الحيلة الأولى التي سنرىها هنا تستخدم موضع خاصية. لديك اثنين

, واحد هو الحاوية ، والآخر ، العنصر الفرعي الذي يحتوي على المحتوى.

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

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

هذه الخدعة مثالية عندما يكون هناك عنصر فرعي واحد ، وإلا مطلق سيؤثر الموضع على العنصر الآخر داخل نفس الحاوية.

2. استخدام تحويل CSS3

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

بافتراض أن لدينا بنية HTML نفسها كالطريقة السابقة - أحد الوالدين ، عنصر فرعي واحد - 50٪ من الأعلى واستخدام تحويل CSS يعطي ترجمة ل -50٪. وهناك لديك.

ضع في اعتبارك على الرغم من أن تحويلات CSS3 لن تعمل في برنامج Internet Explorer 8 وما دونه. قد ترغب في استخدام أي من الطرق الأخرى هنا كاحتياطي.

3. استخدام الحشو

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

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

4. استخدام خط الطول

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

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

5. استخدام CSS الجدول

شخصيا ، فإن استخدام CSS Table هو خدعتي المفضلة لتطبيق المحاذاة الرأسية. إنه يعمل في المتصفحات القديمة مثل Internet Explorer 8. ويتم هذا الأسلوب عن طريق تعيين عرض عنصر الحاوية على الطاولة, بينما العنصر الفرعي ليتم عرضه كـ الجدول الخلية ثم استخدم محاذاة رأسية خاصية توسيط النص رأسياً.

6. استخدام Flexbox

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

ضع في اعتبارك أن بعض مستعرضات Flexbox تدعم ميزة الأجزاء الجزئية فقط من وحدة Flexbox مثل Internet Explorer 10 و Safari و 6 و Chrome 27 وما يليه. وبالتالي ، على غرار الحيلة مع CSS3 Transform ، تأكد من أن التأثير يسقط بشكل جيد في هذه المتصفح.