المحاذاة الرأسية في Bootstrap 4

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

الهوامش التلقائية

يمكن استخدام الهوامش التلقائية لتوسيط العناصر عموديًا داخل حاوياتها. يتم تحقيق ذلك عن طريق إضافة فئة my-auto إلى العنصر الذي تريد توسيطه. على سبيل المثال:

Flexbox
يستفيد Bootstrap 4 من Flexbox افتراضيًا، مما يوفر أدوات قوية للمحاذاة الرأسية. لتوسيط عنصر عموديًا باستخدام Flexbox، استخدم فئة align-self-center على العنصر. وبدلاً من ذلك، سيؤدي استخدام align-items-center في الحاوية الأصلية إلى توسيط جميع عناصرها المرنة عموديًا.
Display Utilities
يمكن استخدام أدوات العرض المساعدة لإنشاء سياق عرض للعناصر. بالاشتراك مع أدوات المحاذاة العمودية، يمكنك ضبط المحاذاة الرأسية لعناصر الخلايا المضمنة أو الجدولية. على سبيل المثال:
من خلال فهم هذه التقنيات، يمكنك توسيط العناصر عموديًا بشكل فعال في Bootstrap 4، مما يعزز المحاذاة والجاذبية المرئية لصفحات الويب الخاصة بك.