التوسيط الدقيق translate-middle | العرض والتموضع والفيضان في بوتستراب 5

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

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

عندما تضع عنصراً مطلقاً عند إحداثيات المنتصف top-50 start-50، يضع المتصفح «الزاوية العليا» للعنصر في المنتصف فيبدو منحرفاً قليلاً للأسفل والجانب. يعالج كلاس .translate-middle ذلك بسحب العنصر عكسياً بمقدار نصف عرضه ونصف ارتفاعه translate(-50%, -50%) ليتطابق مركزه الهندسي مع النقطة المستهدفة بدقة مليمترية.

وإذا أردت السحب على محور واحد فقط، استخدم .translate-middle-x للمحور الأفقي أو .translate-middle-y للمحور الرأسي.

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

HTML

<div class="p-4">
  <div class="position-relative d-inline-block
    px-4 py-2 text-bg-primary rounded-3">
    Inbox Messages
    <span class="position-absolute top-0 start-100
      translate-middle px-2 py-1 text-bg-danger
      rounded-pill small">9+</span>
  </div>
</div>

جرّب بنفسك

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

Centering translate-middle التوسيط الدقيق translate-middle

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

جميع فقرات هذا الدرس (العرض والتموضع والفيضان في بوتستراب 5)