توسيط عناصر html باستخدام html

المشكلة باستخدام ال margin لكل صورة على حدى انه عند تغير عرض الشاشة وعلى سبيل المثال فتح الموقع على الموبايل سيتوجب عليك وضع margin مختلف لكل صورة وهذا اصبل لديك عدد كبير من الاكواد لتنفيذ غرض بسيط، ولكن الاصح ان تستخدم

text-align: center;

على الاب الخاص بالصورة و النص حيث سيكون متوافق مع كل الشاشات في هذه الطريقة.

بالاضافة الى حل عمر يمكنك الاستفادة من الخاصية خصائص الصندوق المرن flex box في ذلك ,وذلك عن طريق اعطاء الأب الخصائص التالية

  display: flex;
  align-items: center;
  justify-content: center;

 باستخدام هذه الخصائص نضمن توسيط العناصر بشكل عمودي وأفقي