كيفية توسيط الصور باستخدام CSS

تبحث لتوسيط صورة باستخدام CSS؟ غالبًا ما تكون مشكلات المحاذاة مصدر إحباط لمصممي الويب. لحسن الحظ ، يعد توسيط الصورة باستخدام CSS أمرًا بسيطًا حقًا ، وسنعرض لك كيفية القيام بذلك في بضع خطوات.

كما هو الحال مع العديد من مهام تصميم الويب ، هناك أكثر من طريقة لإنجاز ذلك! سنغطي ثلاث طرق رئيسية في هذه المقالة. هيا بنا نبدأ!

1. استخدم خاصية الهامش

وضع حافة الخاصية هي إحدى أسهل الطرق لتوسيط صورة أفقيًا باستخدام CSS. الهوامش هي عنصر أساسي في نموذج مربع CSS.

أولاً ، ستحتاج إلى تحويل عنصر الصورة من عنصر مضمن إلى عنصر كتلة. تشغل عناصر HTML على مستوى الكتلة العرض الكامل لعنصرها الأصلي وتكون قادرة على تناول العرض الكامل للصفحة.

من خلال جعل عنصر الصورة عنصر كتلة ، يمكنك بعد ذلك معالجة موضعه عن طريق ضبط هوامشه الأفقية. ستحتاج أيضًا إلى تعيين عرض محدد للصورة ، لتحديد مقدار المساحة التي تشغلها الصورة على الصفحة.

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

img.center {
 العرض محجوب؛
 الهامش الأيسر: تلقائي ؛
 الهامش الأيمن: تلقائي ؛
 العرض: 800 بكسل ؛
}

2. استخدم تخطيط Flexbox

تتطلب هذه الطريقة وضع الصورة في عنصر على مستوى الكتلة ، عادةً ما يكون ملف شعبة:

بمجرد القيام بذلك ، يمكنك إضافة بعض الخصائص للتحكم في مظهره. ستستخدم خاصيتين CSS.

أول واحد هو عرض الخاصية مع تعيين قيمتها على ثني. يمكنك أيضا استخدم المرن لمحاذاة العناصر في HTML. الخاصية الثانية التي ستضيفها إلى div الخاص بك هي تبرير المحتوى، مع قيمته المحددة على المركز مثل ذلك:

div.center {
 عرض: فليكس ؛
 تبرير المحتوى: مركز ؛
}

3. استخدم عنصر المركز الموقوف

تشجعك أفضل ممارسات الويب على استخدام CSS للتصميم و HTML للدلالات ، لذلك يجب ألا تستخدم طريقة HTML هذه. ال المركز العلامة ، التي تمركز محتوياتها أفقيًا ، تم إهمالها في HTML5.

ولكن إذا كان لا بد من ذلك ، فإليك كيفية توسيط صورة باستخدام HTML فقط. ببساطة قم بلف ملف IMG علامة في علامة المركز مثل ذلك:

هذه هي كيفية محاذاة صورك بتنسيق HTML

لقد أوضحنا لك ثلاث طرق مختلفة وسهلة الاستخدام لتوسيط صورك في مستند HTML. جربهم جميعًا واختر الأفضل بالنسبة لك. تجنب الطريقة الثالثة إلا إذا لم يكن لديك أي خيار على الإطلاق!

شيء واحد يجب مراعاته هو أن هناك عددًا قليلاً من الطرق الأخرى لتوسيط الصور باستخدام HTML و CSS. إحدى الطرق الشائعة التي تعمل مع كل من النص والصور المضمنة هي امتداد محاذاة النص منشأه.

كيفية توسيط محاذاة النص في صفحة الويب الخاصة بك باستخدام CSS

اقرأ التالي

نبذة عن الكاتب