يساعدنا CSS في التحكم في عرض الصور في تطبيقات الويب. يعد توسيط الصور أو النصوص مهمة شائعة في CSS. لتوسيط الصورة، علينا تعيين قيمة الهامش الأيسر و الهامش الأيمن ل آلي وجعله عنصر كتلة باستخدام العرض محجوب؛ ملكية.

إذا كانت الصورة موجودة في عنصر div، فيمكننا استخدام محاذاة النص: مركز؛ خاصية محاذاة الصورة إلى المركز في div.

ال يقال أن العنصر هو عنصر مضمن يمكن توسيطه بسهولة عن طريق تطبيق محاذاة النص: مركز؛ خاصية CSS إلى العنصر الأصلي الذي يحتوي عليه.

ملاحظة: لا يمكن توسيط الصورة إذا تم ضبط العرض على 100% (العرض الكامل).

يمكننا استخدام خاصية الاختزال هامِش وتعيينه على آلي لمحاذاة الصورة في المنتصف، بدلاً من استخدام الهامش الأيسر و الهامش الأيمن ملكية.

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

مثال

في هذا المثال، نقوم بمحاذاة الصور باستخدام محاذاة النص: مركز؛ ملكية. الصورة موجودة في عنصر div.

 div { border: 2px solid red; } img{ height: 300px; width: 300px; } #center { text-align: center; } <img src="//techcodeview.com/img/css-tutorial/36/how-center-images-css.webp"> 

انتاج |

مثال

الآن، نحن نستخدم الهامش الأيسر: تلقائي؛ الهامش الأيمن: تلقائي؛ و العرض محجوب؛ خصائص محاذاة الصورة إلى المركز.

 body{ background-color: lightblue; } #image { display: block; margin-left: auto; margin-right: auto; border: 8px ridge blue; padding: 5px; } 

اختبره الآن

انتاج |

---