محاذاة وتوسيط الصور | الصور والأشكال التوضيحية في بوتستراب 5

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

لمحاذاة الصور على طرفي الحاوية بطريقة تحترم اتجاه اللغة تلقائياً، استبدل بوتستراب 5 كلاسات التعويم الفيزيائية القديمة بكلاسي .float-start لبداية السطر (اليمين في العربية واليسار في الإنجليزية) و.float-end لنهاية السطر، مع احتواء العنصر الأب للطفو عبر كلاس .overflow-hidden.

ولتوسيط صورة مستقلة في منتصف السطر أفقياً، تذكر أن وسم <img> عنصر سطري بطبيعته؛ لذا ندمج كلاس التحويل الكتلي .d-block مع الهامش الأفقي التلقائي .mx-auto ليتمركز في المنتصف بدقة.

الصف 2 معاينة حية

الصف 3 كود برمجي

HTML

<div class="overflow-hidden">
  <img src="/images/examples/laptop-pro.webp"
       width="140" class="rounded float-start" alt="Start">
  <img src="/images/examples/studio-desk-3x2.webp"
       width="140" class="rounded float-end" alt="End">
</div>

جرّب بنفسك

الصف 4 ملاحظة هامة

Aligning and Centering Images محاذاة وتوسيط الصور

شرح صفوف ومحتوى الفقرة

جميع فقرات هذا الدرس (الصور والأشكال التوضيحية في بوتستراب 5)