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

للحصول على الدعم في HTML5 ، يجب عليك استخدام سمة نمط مع محاذاة النص القيمة : center داخل عنصر مستوى الكتلة ؛ مثل أ العلامات.

مثال كود HTML

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

مثال على مركز الصورة باستخدام الرمز أعلاه

تحويل إلى عنصر كتلة مستوى

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

مثال كود HTML

 .centerImage {text-align: center؛ العرض محجوب؛ } 

باستخدام هذا الرمز ، يمكنك تطبيق فئة centerImage على العلامة دون الحاجة إلى تداخلها في عنصر مستوى الكتلة. هذه الطريقة تعمل لصور متعددة.

مثال رمز الصورة المتمركزة

باستخدام العلامات

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

مثال كود HTML