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

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



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

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

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

يعد تعيين خاصية margin من أسهل الطرق لتوسيط الصورة أفقيًا باستخدام CSS. الهوامش هي عنصر أساسي في قالب مربع CSS.

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

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

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

img.centre {

 bloc de visualisation;

 marge-gauche : auto ;

 marge droite : automatique ;

 largeur : 800 pixels ;

}

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

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

<div class = "center">

 <img src = ”xyz.jpg”>

</div>

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


  كيفية البحث في جميع ملفات PDF عن جميع الكلمات والجمل التي تريدها مرة واحدة

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


div.centre {

 affichage : flexible ;

 justifier-contenu : centrer ;

}

3. استخدم عنصر التوسيط

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


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


<center>

 <img src = ”xyz.jpg”>

</center>

هذه هي كيفية محاذاة صور HTML الخاصة بك

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

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

تعليقات
ليست هناك تعليقات
إرسال تعليق



    وضع القراءة :
    حجم الخط
    +
    16
    -
    تباعد السطور
    +
    2
    -