يساعدنا 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; } اختبره الآن انتاج |
