كيفية توسيط صورة في Div أفقيًا؟
يمكن للمطور استخدام خاصية الهامش ، ووحدة Flexbox ، وتخطيط عرض الشبكة ، وسمة الموضع لتوسيط الصورة في div أفقيًا. اتبع الدليل أدناه لمحاذاة الصورة أفقيًا في علامة div.
لنفترض أن هناك div حيث يتم وضع الصورة بهذه الطريقة في ملف HTML:
< شعبة فصل = 'جذر' >
< IMG src = '../book.jpg' ارتفاع = 'خمسون٪' عرض = 'خمسون٪' فصل = 'صورة' >
< / شعبة >
تحصل الصورة على عرض وارتفاع 50٪ وفئة 'صورة'.
باستخدام خاصية الهامش
يمكن للمستخدمين إضافة مساحة حول عناصر HTML باستخدام خاصية الهامش. يقوم بتعيين هامش وفقًا للمساحة المتاحة بعد تغيير حجم شاشة النافذة. على سبيل المثال ، يضبط margin-left و right على auto ، ويتم ضبط خاصية العرض على الحظر:
IMG {
العرض محجوب؛
الهامش الأيسر: تلقائي ؛
الهامش الأيمن: تلقائي ؛
}
بعد تنفيذ المثال أعلاه ، تبدو صفحة الويب كما يلي:
أظهر الإخراج أعلاه أن الصورة الآن في المركز.
باستخدام وحدة Flexbox
ال ' فليكس بوكس 'هي وحدة تحتوي على مجموعة كاملة من الخصائص. في حالتنا ، حدد فئة العنصر الجذر واستخدم المرن كقيمة لخاصية العرض. تعيين المركز كقيمة لـ ' تبرير المحتوى ' و ' محاذاة العناصر ' ملكيات:
.جذر {العرض: فليكس ؛
يبرر- محتوى : مركز؛
محاذاة العناصر: مركز ؛
خلفية- لون : أزرق؛
}
تبدو صفحة الويب بهذا الشكل بعد تنفيذ الكود:
يوضح الإخراج أعلاه أن الصورة معروضة في وسط div مع ضبط لون الخلفية على 'أزرق'.
استخدام وحدة تخطيط عرض الشبكة
يحتوي تخطيط عرض الشبكة على 12 عمودًا ، ويتم تعيين العرض الإجمالي على 100٪ ويضع كل عنصر في موضع معين على صفحة الويب:
.جذر {عرض: شبكة ؛
عناصر المكان: مركز ؛
}
في مقتطف الشفرة أعلاه ، يتم تعيين قيمة 'الشبكة' لخاصية العرض. بينما يتم استخدام 'place-item' كاختصار لخصائص 'justify-content' و 'align-items':
يصادق الإخراج على أن الصورة في وسط div باستخدام طريقة الشبكة:
استخدام خاصية الموضع
عن طريق تعيين موضع فئة الجذر إلى قيمة نسبية وفئة الصورة على القيمة المطلقة. يمكن عرض الصورة في وسط div:
.جذر {الموقف: نسبي ؛
}
.صورة {
عرض : 700 بكسل ؛
ارتفاع : 500 بكسل ؛
الموقف: مطلق.
غادر: خمسون ٪؛
تحويل: translateX ( - خمسون ٪ ) ؛
}
يتم نقل الصورة إلى يسار '50٪' ثم العودة مرة أخرى إلى '-50٪' عند المحور X. يعرض الصورة في وسط div أفقيًا:
هذه هي الطريقة التي يمكن بها توسيط الصورة في div أفقيًا.
خاتمة
لتعيين الصورة أفقيًا في عنصر div ، استخدم ' هامِش '،' وحدة مرنة '،' تخطيط الشبكة ' و ' موضع ' ملكيات. ال ' هامِش 'يتم تعيين خاصية اليسار واليمين على تلقائي. تعمل 'الوحدة النمطية المرنة' و 'تخطيط الشبكة' على ضبط العرض على الانثناء والشبكة على التوالي واستخدام ' عنصر مكان 'خاصية لتوسيط الصورة. تحدد خاصية الموضع القيمة المتعلقة بفئة الجذر والمطلقة لفئة الصورة وتستخدم خصائص 'اليسار' و 'التحويل'. لقد أوضحت هذه المدونة بنجاح كيفية توسيط الصور في div أفقيًا.