كيفية توسيط صورة رأسيًا وأفقيًا باستخدام CSS

يعاني العديد من المطورين أثناء العمل مع الصور. يعتبر التعامل مع الاستجابة والمحاذاة أمرًا صعبًا بشكل خاص ، لا سيما توسيط الصورة في منتصف الصفحة.

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

لقد تجاوزت خصائص CSS Position and Display في رسالتي السابقة. إذا لم تكن معتادًا على هذه الخصائص ، فإنني أوصي بمراجعة هذه المنشورات قبل قراءة هذه المقالة.

إليك نسخة فيديو إذا كنت تريد التحقق منها:

توسيط الصورة أفقيًا

لنبدأ بتوسيط الصورة أفقيًا باستخدام 3 خصائص CSS مختلفة.

محاذاة النص

الطريقة الأولى لتوسيط الصورة أفقيًا هي استخدام text-alignالخاصية. ومع ذلك ، لا تعمل هذه الطريقة إلا إذا كانت الصورة داخل حاوية على مستوى الكتلة مثل :

 div { text-align: center; } 

الهامش: تلقائي

هناك طريقة أخرى لتوسيط الصورة وهي استخدام margin: autoالخاصية (للهامش الأيسر والهامش الأيمن).

ومع ذلك ، margin: autoلن يعمل الاستخدام وحده للصور. إذا كنت بحاجة إلى استخدام margin: auto، فهناك خاصيتان إضافيتان يجب عليك استخدامهما أيضًا.

لا تحتوي خاصية margin-auto على أي تأثيرات على العناصر المضمنة. نظرًا لأن العلامة عنصر مضمن ، نحتاج إلى تحويلها إلى عنصر على مستوى الكتلة أولاً:

img { margin: auto; display: block; }

ثانيًا ، نحتاج أيضًا إلى تحديد العرض. لذلك يمكن أن تأخذ الهوامش اليمنى واليسرى بقية المساحة الفارغة وتقوم بمحاذاة نفسها تلقائيًا ، وهو ما يؤدي إلى الحيلة (ما لم نمنحها عرضًا بنسبة 100٪):

img { width: 60%; margin: auto; display: block; }

العرض: فليكس

الطريقة الثالثة لتوسيط الصورة أفقيًا هي باستخدام display: flex. تمامًا كما استخدمنا text-alignالخاصية للحاوية ، نستخدمها display: flexأيضًا للحاوية.

ومع ذلك ، فإن الاستخدام display: flexوحده لن يكون كافيًا. يجب أن تحتوي الحاوية أيضًا على خاصية إضافية تسمى justify-content:

div { display: flex; justify-content: center; } img { width: 60%; }

و justify-contentالملكية تعمل جنبا إلى جنب مع display: flex، والتي يمكننا استخدامها لتوسيط الصورة أفقيا.

أخيرًا ، يجب أن يكون عرض الصورة أصغر من عرض الحاوية ، وإلا فإنها تأخذ 100٪ من المساحة ومن ثم لا يمكننا توسيطها.

: هام و display: flexغير معتمد الملكية في الإصدارات القديمة من المتصفحات. انظر هنا لمزيد من التفاصيل.

توسيط الصورة عموديًا

العرض: فليكس

للمحاذاة الرأسية ، display: flexيعد الاستخدام مفيدًا حقًا مرة أخرى.

ضع في اعتبارك حالة يبلغ ارتفاع الحاوية الخاصة بنا فيها 800 بكسل ، ولكن ارتفاع الصورة يبلغ 500 بكسل فقط:

div { display: flex; justify-content: center; height: 800px; } img { width: 60%; height: 500px; }

الآن ، في هذه الحالة ، تؤدي إضافة سطر واحد من التعليمات البرمجية إلى الحاوية align-items: centerإلى الحيلة:

div { display: flex; justify-content: center; align-items: center; height: 800px; }

و align-itemsعناصر الموقف يمكن الممتلكات عموديا إذا استخدمت جنبا إلى جنب مع display: flex.

الوظيفة: خصائص التحويل والمطلق

هناك طريقة أخرى للمحاذاة الرأسية وهي استخدام الخصائص positionو transformمعًا. هذا معقد بعض الشيء ، لذلك دعونا نفعل ذلك خطوة بخطوة.

الخطوة 1: تحديد المركز المطلق

أولاً ، نقوم بتغيير سلوك تموضع الصورة من staticإلى absolute:

div { height: 800px; position: relative; background: red; } img { width: 80%; position: absolute; }

أيضًا ، يجب أن يكون داخل حاوية موضوعة نسبيًا ، لذلك نضيف position: relativeإلى حاويته div.

الخطوة 2: تحديد الخصائص العلوية واليسرى

ثانيًا ، نحدد الخصائص العلوية واليسرى للصورة ، ونضبطها على 50٪. سيؤدي هذا إلى تحريك نقطة البداية (أعلى اليسار) للصورة إلى وسط الحاوية:

img { width: 80%; position: absolute; top: 50%; left: 50%; }

الخطوة 3: تحديد خاصية التحويل

لكن الخطوة الثانية نقلت الصورة جزئيًا خارج الحاوية الخاصة بها. لذلك نحن بحاجة إلى إعادته إلى الداخل.

يؤدي تحديد transformخاصية وإضافة -50٪ إلى محوريها X و Y إلى الحيلة:

img { width: 80%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

هناك طرق أخرى لتوسيط الأشياء أفقيًا ورأسيًا ، لكنني أوضحت أكثرها شيوعًا. آمل أن يساعدك هذا المنشور في فهم كيفية محاذاة صورك في وسط الصفحة.

إذا كنت تريد معرفة المزيد عن تطوير الويب ، فلا تتردد في زيارة قناة Youtube الخاصة بي لمزيد من المعلومات.

شكرا لقرائتك!