هل ترغب في توسيط صورة ما باستخدام CSS؟ غالبًا ما تكون مشكلات المحاذاة مصدر إحباط لمُصممي الويب. لحسن الحظ ، يُعد توسيط الصورة باستخدام CSS أمرًا بسيطًا حقًا ، وسوف نوضح لك كيفية القيام بذلك في بضع خطوات.
كما هو الحال مع العديد من مهام تصميم الويب ، هناك أكثر من طريقة لإنجاز ذلك! سنُغطي بعض الطرق الرئيسية في هذه المقالة. هيا بنا نبدأ! تحقق من كيفية تعديل صفحات الويب على Safari باستخدام Inspect Element.
1. استخدام خاصية الهامش
يُعد تعيين خاصية الهامش من أسهل الطرق لتوسيط الصورة أفقيًا باستخدام CSS. الهوامش هي عنصر أساسي في نموذج مربع CSS.
أولاً ، ستحتاج إلى تحويل عنصر الصورة من عنصر مُضمن إلى عنصر كتلة. تشغل عناصر HTML على مستوى الكتلة العرض الكامل لعنصرها الأصلي ويمكنها استهلاك العرض الكامل للصفحة.
من خلال جعل عنصر الصورة عنصر كتلة ، يُمكنك بعد ذلك معالجة موضعها عن طريق ضبط هوامشها الأفقية. ستحتاج أيضًا إلى تعيين عرض مُحدد للصورة ، لتحديد مقدار المساحة التي تشغلها الصورة على الصفحة.
مهما كان العرض الذي تختاره ، يجب أن يكون للصورة هوامش متساوية على اليسار واليمين. يُمكنك تحقيق ذلك بسهولة عن طريق إعطاء خاصية الهامش قيمة تلقائية:
img.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 800px;
} 2. استخدم تخطيط Flexbox
تتطلب هذه الطريقة وضع الصورة في عنصر على مستوى الكتلة ، وعادةً ما يكون div:
<div class=”center”> <img src=”xyz.jpg”> </div>
بمجرد القيام بذلك ، يُمكنك إضافة بعض الخصائص للتحكم في مظهرها. ستستخدم خاصيتين لـ CSS.
الأولى هي خاصية العرض مع ضبط قيمتها على flex. يُمكنك أيضًا استخدام flex لمحاذاة العناصر في HTML. الخاصية الثانية التي ستُضيفها إلى div هي justify-content ، مع تعيين قيمتها على Center كما يلي:
div.center {
display: flex;
justify-content: center;
} 3. استخدام عنصر التوسيط
تُشجعك أفضل ممارسات الويب على استخدام CSS للتصميم و HTML للدلالات ، لذلك يجب ألا تستخدم طريقة HTML هذه. يتم إهمال علامة التوسيط ، التي تقوم بتوسيط مُحتوياتها أفقيًا ، في HTML5.
ولكن إذا كان لا بد من ذلك ، فإليك كيفية توسيط صورة باستخدام HTML فقط. قم ببساطة بلف علامة img ضمن علامة center مثل هذا:
<center> <img src=”xyz.jpg”> </center>
هذه هي كيفية مُحاذاة صورك بتنسيق HTML
لقد أوضحنا لك ثلاث طرق مختلفة وسهلة الاستخدام لتوسيط صورك في مستند HTML. جربها جميعًا واختر الأفضل بالنسبة لك. تجنب الطريقة الثالثة إلا إذا لم يكن لديك أي خيار على الإطلاق!
شيء واحد يجب مراعاته هو أنَّ هناك عددًا قليلاً من الطرق الأخرى لتوسيط الصور باستخدام HTML و CSS. إحدى الطرق الشائعة التي تعمل مع كل من النص والصور المُضمنة هي خاصية محاذاة النص. يُمكنك الإطلاع الآن على ألعاب ممتعة لمساعدتك على تعلم برمجة CSS بسهولة.
