2.0 KiB
2.0 KiB
title | localeTitle |
---|---|
Center an Image Using Text Align Center | توسيط صورة باستخدام Text Align Center |
توسيط صورة باستخدام Text Align Center
عنصر <img>
هو عنصر مضمّن (قيمة العرض من inline-block
). يمكن توسيطه بسهولة عن طريق إضافة text-align: center;
خاصية CSS للعنصر الرئيسي يحتوي عليها.
لتوسيط صورة باستخدام text-align: center;
يجب وضع <img>
داخل عنصر مستوى الكتلة مثل div
. نظرًا لأن خاصية text-align
تنطبق فقط على عناصر مستوى الكتلة ، فأنت تضع text-align: center;
على عنصر كتلة مستوى الالتفاف لتحقيق <img>
مركزًا أفقيًا.
مثال
`
<html> <head> </head>ملاحظة: يجب أن يكون العنصر الرئيسي عنصر كتلة. إذا لم يكن عنصر كتلة ، يجب عليك إضافة display: block;
خاصية CSS مع خاصية text-align
.
`
<html> <head> </head> </html> `العرض التوضيحي: Codepen