2.0 KiB
2.0 KiB
title, localeTitle
| 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> <style> .img-container { text-align: center; } </style> </head>
ملاحظة: يجب أن يكون العنصر الرئيسي عنصر كتلة. إذا لم يكن عنصر كتلة ، يجب عليك إضافة display: block; خاصية CSS مع خاصية text-align .
`
<html> <head> <style> .img-container { text-align: center; display: block; } </style> </head>
</html>
`
العرض التوضيحي: Codepen