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

مقدمة: تحدي توسيط الصور في تصميم الويب

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

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

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

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

استخدام خاصية text-align

تعتبر خاصية text-align الطريقة الأبسط لتوسيط المحتوى الأفقي. ومع ذلك، تعمل هذه الطريقة فقط إذا كانت الصورة عنصراً داخلياً (inline-level element) موضوعاً داخل حاوية على مستوى الكتلة (block-level container) مثل عنصر <div>. ببساطة، تقوم هذه الخاصية بتوسيط جميع المحتوى النصي والعناصر الداخلية داخل الحاوية التي تُطبق عليها.

 <style>
  div {
   text-align: center;
  }
 </style>
 <div>
  <img src="your-image.jpg" alt="صورة توضيحية">
 </div>

توسيط الصور بـ margin: auto

تُعد خاصية margin: auto حلاً فعالاً لتوسيط العناصر على مستوى الكتلة أفقياً. ولكن، تطبيق margin: auto بمفرده على عنصر <img> لن يؤدي الغرض المطلوب مباشرة، وذلك لأن عنصر <img> هو عنصر داخلي (inline element) بشكل افتراضي، ولا تتأثر الهوامش التلقائية على العناصر الداخلية.

لجعل margin: auto يعمل، يجب علينا أولاً تحويل عنصر <img> إلى عنصر على مستوى الكتلة باستخدام display: block:

 img {
  margin: auto;
  display: block;
 }

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

 img {
  width: 60%; /* يجب أن يكون العرض أقل من 100% */
  margin: auto;
  display: block;
 }

توسيط الصور بـ display: flex

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

 div {
  display: flex;
  justify-content: center;
 }
 img {
  width: 60%; /* يجب أن يكون عرض الصورة أقل من عرض الحاوية */
 }

تعمل خاصية justify-content بالتنسيق مع display: flex لترتيب العناصر على المحور الرئيسي (الأفقي افتراضياً) وتوسيطها. من المهم ملاحظة أن عرض الصورة يجب أن يكون أصغر من عرض الحاوية، وإلا ستشغل 100% من المساحة ولن يكون هناك مجال للتوسيط.

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

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

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

توسيط الصور عمودياً بـ display: flex

مرة أخرى، يثبت Flexbox أنه أداة لا تقدر بثمن للتوسيط، وهذه المرة للتوسيط العمودي. لنفترض أن لدينا حاوية بارتفاع 800 بكسل، بينما ارتفاع الصورة داخلها 500 بكسل فقط:

 div {
  display: flex;
  justify-content: center; /* للتوسيط الأفقي أيضاً */
  height: 800px;
  background: #f0f0f0; /* لإظهار حدود الحاوية */
 }
 img {
  width: 60%;
  height: 500px;
 }

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

 div {
  display: flex;
  justify-content: center;
  align-items: center; /* لتوسيط العناصر عمودياً */
  height: 800px;
  background: #f0f0f0;
 }
 img {
  width: 60%;
  height: 500px;
 }

تُستخدم خاصية align-items لتحديد كيفية محاذاة العناصر على المحور المتقاطع (العمودي افتراضياً) داخل حاوية Flexbox.

الجمع بين position: absolute و transform

هذه الطريقة أكثر تعقيداً قليلاً ولكنها توفر تحكماً دقيقاً وتعمل في سيناريوهات لا يمكن لـ Flexbox تغطيتها (مثل المتصفحات القديمة جداً). دعنا نستعرضها خطوة بخطوة.

الخطوة 1: تحديد position: absolute

أولاً، نقوم بتغيير سلوك تحديد موضع الصورة من static (الافتراضي) إلى absolute. يجب أن تكون الصورة داخل حاوية ذات موضع نسبي (position: relative) لكي يتم تحديد موضعها المطلق بالنسبة لتلك الحاوية.

 div {
  height: 800px;
  position: relative; /* الحاوية الأبوية يجب أن تكون ذات موضع نسبي */
  background: #ffe0e0;
 }
 img {
  width: 80%;
  position: absolute; /* الصورة ذات موضع مطلق */
 }

الخطوة 2: تحديد خاصيتي top و left

ثانياً، نحدد خاصيتي top و left للصورة ونضبطهما على 50%. هذا سينقل النقطة المرجعية (الزاوية العلوية اليسرى) للصورة إلى مركز الحاوية.

 img {
  width: 80%;
  position: absolute;
  top: 50%; /* تحريك 50% من الأعلى */
  left: 50%; /* تحريك 50% من اليسار */
 }

في هذه المرحلة، ستلاحظ أن الصورة ليست في المنتصف تماماً؛ بل إن الزاوية العلوية اليسرى للصورة هي التي تقع في المنتصف، مما يدفع جزءاً من الصورة خارج الحاوية.

الخطوة 3: تطبيق خاصية transform

لإعادة الصورة إلى المنتصف تماماً، نحتاج إلى إزاحتها بمقدار نصف عرضها ونصف ارتفاعها إلى الخلف. يتم ذلك باستخدام خاصية transform مع الدالة translate()، حيث نطبق قيمة -50% على المحورين X و Y.

 img {
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* إزاحة الصورة بنسبة 50% من حجمها */
 }

هذه الخطوة تضمن أن مركز الصورة هو الذي يتطابق مع مركز الحاوية، مما يحقق التوسيط المثالي.

الخلاصة التقنية

لقد استعرضنا في هذا الدليل الشامل أبرز الطرق وأكثرها فعالية لتوسيط الصور عمودياً وأفقياً باستخدام CSS. من الحلول البسيطة مثل text-align للعناصر الداخلية، إلى الطرق الأكثر قوة ومرونة مثل display: flex، وصولاً إلى التقنية الدقيقة التي تجمع بين position: absolute و transform. اختيار الطريقة الأنسب يعتمد على سياق المشروع، دعم المتصفحات المستهدف، ومدى التعقيد المطلوب في التخطيط. يُفضل استخدام Flexbox في المشاريع الحديثة لمرونته وسهولة استخدامه، بينما تبقى طرق margin: auto و position: absolute حلولاً قوية وموثوقة لسيناريوهات محددة أو لدعم المتصفحات القديمة. إتقان هذه التقنيات سيمكنك من التحكم الكامل في محاذاة الصور وتحسين تجربة المستخدم على موقعك.