إذا كنت تنشئ مواقع ويب باستخدام HTML و CSS ، فستعمل مع الصور كثيرًا.
غالبًا ما يعاني المطورون من محاذاة الصورة في CSS ، خاصةً عند محاولة اكتشاف كيفية توسيط الصورة.
إن توسيط أي شيء في CSS ليس بالأمر السهل حقًا - خاصة للمبتدئين.
العنصر img هو عنصر من نوع "inline" ، و هذا يجعل الأمر أكثر صعوبة في التوسيط.
لكن لا تقلق ، يمكنك تحويل الصورة إلى عنصر "block" ثم توسيطها.
في هذه المقالة ، سأوضح لك 4 طرق مختلفة يمكنك من خلالها توسيط الصور.
كيفية توسيط الصور في CSS:
توسيط الصور باستخدام خاصية محاذاة النص "text-align"
يمكنك توسيط صورة بواسطة الخاصية text-align.
شيء واحد يجب أن تعرفه هو أن الوسم الخاص بجلب الصور - img- هو وسم من نوع "inline".
ويعمل التوسيط بواسطة الخاصية text-align مع الوسوم من نوع "block".
إذن كيف يمكنك توسيط صورة بخاصية محاذاة النص؟
تقوم بوضع الصورة في عنصر من نوع "block" مثل div ونقوم باعطاء الـ div خاصية text-align
<div>
<img src="dhleez.png" alt="dhleez logo" />
</div>
div {
text-align: center;
}
توسيط الصور باستخدام Flexbox
Flexbom في CSS تجعل من السهل توسيط اي شيء.
يعمل Flexbox عن طريق وضع ما تريد توسيطه داخل حاوية وإعطاء الحاوية خاصية ;display:flex
ثم يتم تعيين خاصية justify-content:center وسوف يكون شكل الكود كالتالي:
div {
display: flex;
justify-content: center;
}
ملاحظة: تم تعيين خاصية ;justify-content:center لتوسيط الصورة أفقيًا.
لتوسيط الصورة عموديًا أيضًا ، تحتاج إلى عمل الخاصية ;align-items:center.
توسيط الصور باستخدام CSS Grid
تعمل CSS Grid مثل Flexbox ، مع ميزة إضافية تتمثل في أن الشبكة متعددة الأبعاد ، على عكس Flexbox ثنائي الأبعاد.
لتوسيط صورة باستخدام CSS Grid ، قم بوضع الصورة في عنصر div وقم بمنحه الخاصية ;display:grid . ثم امنحه الخاصية ;place-items:center.
div {
display: grid;
place-items: center;
}
ملاحظة: place-items ذات قيمة center تقوم بتوسيط أي شيء أفقياً وعمودياً.
توسيط الصور مع خاصية الهامش margin
يمكنك أيضًا توسيط الصورة عن طريق تعيين الهامش الأيمن والأيسر الى تلقائي .
ولكن تمامًا مثل الخاصية text-align، تعمل الخاصية margin مع العناصر من نوع "block" فقط (مثل العنصر div).
لذا ، ما عليك فعله هو تحويل الصورة إلى عنصر على مستوى block أولاً من خلال إعطائها الخاصية ;display:block.
img {
display: block;
margin: 0 auto;
}
هذه الخاصيتين يمكن أن تكون كافية.
لكن في بعض الأحيان ، يتعين عليك تعيين عرض للصورة ، لذا فإن الهامش التلقائي الأيمن والأيسر سيحتويان على مسافات ليأخذها.
img {
display: block;
margin: 0 auto;
width: 40%;
}
آمل أن تساعدك هذه المقالة في اختيار الطريقة الأفضل بالنسبة لك في توسيط الصورة.