دليل شامل: كيفية توسيط العناصر باستخدام CSS (النصوص، الأقسام، والمزيد)

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

كيفية توسيط العناصر أفقيًا (Horizontally)

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

توسيط النصوص باستخدام خاصية text-align: center

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

 < div class = "container" > < p > Hello, (centered) World! </ p > </ div > 

 .container { font-family : arial; font-size : 24px ; margin : 25px ; width : 350px ; height : 200px ; outline : dashed 1px black; } p { /* Center horizontally*/ text-align : center; } 

توسيط عنصر div باستخدام margin: 0 auto

لتوسيط العناصر من مستوى الكتلة (block-level elements) مثل عنصر div أفقيًا، يمكنك استخدام الخاصية المختصرة margin مع القيمة 0 auto. هذه القيمة تحدد هامشًا علويًا وسفليًا بقيمة 0، وتسمح للمتصفح بحساب الهامش الأيسر والأيمن تلقائيًا لتوسيط العنصر.

 < div class = "container" > < div class = "child" > </ div > </ div > 

 .container { font-family : arial; font-size : 24px ; margin : 25px ; width : 350px ; height : 200px ; outline : dashed 1px black; } .child { width : 50px ; height : 50px ; background-color : red; /* Center horizontally*/ margin : 0 auto; } 

توسيط عنصر div أفقيًا باستخدام Flexbox

يُعد Flexbox الأسلوب الأكثر حداثة ومرونة لتوسيط العناصر في الصفحة، ويُسهّل بشكل كبير تصميم التخطيطات المتجاوبة. ومع ذلك، قد لا يكون مدعومًا بالكامل في بعض المتصفحات القديمة مثل Internet Explorer. لتوسيط عنصر أفقيًا باستخدام Flexbox، ما عليك سوى تطبيق الخاصيتين display: flex و justify-content: center على العنصر الأب (parent element).

 < div class = "container" > < div class = "child" > </ div > </ div > 

 .container { font-family : arial; font-size : 24px ; margin : 25px ; width : 350px ; height : 200px ; outline : dashed 1px black; /* Center child horizontally*/ display : flex; justify-content : center; } .child { width : 50px ; height : 50px ; background-color : red; } 

كيفية توسيط العناصر رأسيًا (Vertically)

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

توسيط عنصر div رأسيًا باستخدام التموضع المطلق (Absolute Positioning) والهوامش السالبة

لفترة طويلة، كانت هذه هي الطريقة المفضلة لتوسيط العناصر رأسيًا. تتطلب هذه الطريقة معرفة ارتفاع العنصر الذي ترغب في توسيطه. أولاً، قم بتعيين خاصية position للعنصر الأب إلى relative. ثم، بالنسبة للعنصر الابن، اضبط خاصية position على absolute و top على 50%.

 < div class = "container" > < div class = "child" > </ div > </ div > 

 .container { font-family : arial; font-size : 24px ; margin : 25px ; width : 350px ; height : 200px ; outline : dashed 1px black; /* Setup */ position : relative; } .child { width : 50px ; height : 50px ; background-color : red; /* Center vertically */ position : absolute; top : 50% ; } 

لكن هذا الإعداد يقوم فقط بتوسيط الحافة العلوية للعنصر الابن رأسيًا. لتوسيط العنصر الابن بشكل صحيح تمامًا، قم بتعيين خاصية margin-top إلى قيمة سالبة تعادل نصف ارتفاع العنصر الابن.

 .container { font-family : arial; font-size : 24px ; margin : 25px ; width : 350px ; height : 200px ; outline : dashed 1px black; /* Setup */ position : relative; } .child { width : 50px ; height : 50px ; background-color : red; /* Center vertically */ position : absolute; top : 50% ; margin-top : - 25px ; /* Half this element's height */ } 

توسيط عنصر div رأسيًا باستخدام transform و translate

إذا كنت لا تعرف ارتفاع العنصر الذي تريد توسيطه (أو حتى إذا كنت تعرفه)، فإن هذه الطريقة تعد حلاً ذكيًا وفعالاً. تشبه هذه الطريقة إلى حد كبير طريقة الهوامش السالبة المذكورة أعلاه. قم بتعيين خاصية position للعنصر الأب إلى relative. بالنسبة للعنصر الابن، اضبط خاصية position على absolute و top على 50%. الآن، بدلاً من استخدام هامش سالب لتوسيط العنصر الابن بشكل صحيح، استخدم ببساطة transform: translate(0, -50%).

 < div class = "container" > < div class = "child" > </ div > </ div > 

 .container { font-family : arial; font-size : 24px ; margin : 25px ; width : 350px ; height : 200px ; outline : dashed 1px black; /* Setup */ position : relative; } .child { width : 50px ; height : 50px ; background-color : red; /* Center vertically */ position : absolute; top : 50% ; transform : translate ( 0 , - 50% ); } 

تجدر الإشارة إلى أن translate(0, -50%) هو اختصار لـ translateX(0) و translateY(-50%). يمكنك أيضًا كتابة transform: translateY(-50%) لتوسيط العنصر الابن رأسيًا فقط.

توسيط عنصر div رأسيًا باستخدام Flexbox

تمامًا كما هو الحال في التوسيط الأفقي، يجعل Flexbox عملية توسيط العناصر رأسيًا سهلة للغاية. لتوسيط عنصر رأسيًا، قم بتطبيق الخاصيتين display: flex و align-items: center على العنصر الأب.

 < div class = "container" > < div class = "child" > </ div > </ div > 

 .container { font-family : arial; font-size : 24px ; margin : 25px ; width : 350px ; height : 200px ; outline : dashed 1px black; /* Center vertically */ display : flex; align-items : center; } .child { width : 50px ; height : 50px ; background-color : red; } 

كيفية توسيط العناصر أفقيًا ورأسيًا معًا

توسيط عنصر div أفقيًا ورأسيًا باستخدام التموضع المطلق والهوامش السالبة

تتشابه هذه الطريقة إلى حد كبير مع طريقة توسيط العنصر رأسيًا المذكورة أعلاه. وكما في السابق، يجب أن تكون على دراية بعرض وارتفاع العنصر الذي ترغب في توسيطه. قم بتعيين خاصية position للعنصر الأب إلى relative. ثم اضبط خاصية position للعنصر الابن إلى absolute، و top إلى 50%، و left إلى 50%. هذا الإعداد يقوم فقط بتوسيط الزاوية العلوية اليسرى للعنصر الابن أفقيًا ورأسيًا. لتوسيط العنصر الابن بشكل صحيح تمامًا، قم بتطبيق هامش علوي سالب يعادل نصف ارتفاع العنصر الابن، وهامش أيسر سالب يعادل نصف عرض العنصر الابن.

 < div class = "container" > < div class = "child" > </ div > </ div > 

 .container { font-family : arial; font-size : 24px ; margin : 25px ; width : 350px ; height : 200px ; outline : dashed 1px black; /* Setup */ position : relative; } .child { width : 50px ; height : 50px ; background-color : red; /* Center vertically and horizontally */ position : absolute; top : 50% ; left : 50% ; margin : - 25px 0 0 - 25px ; /* Apply negative top and left margins to truly center the element */ } 

توسيط عنصر div أفقيًا ورأسيًا باستخدام transform و translate

استخدم هذه الطريقة لتوسيط عنصر أفقيًا ورأسيًا إذا كنت لا تعرف أبعاده الدقيقة ولا يمكنك استخدام Flexbox. أولاً، قم بتعيين خاصية position للعنصر الأب إلى relative. بعد ذلك، اضبط خاصية position للعنصر الابن إلى absolute، و top إلى 50%، و left إلى 50%. أخيرًا، استخدم transform: translate(-50%, -50%) لتوسيط العنصر الابن بشكل صحيح تمامًا.

 < div class = "container" > < div class = "child" > </ div > </ div > 

 .container { font-family : arial; font-size : 24px ; margin : 25px ; width : 350px ; height : 200px ; outline : dashed 1px black; /* Setup */ position : relative; } .child { width : 50px ; height : 50px ; background-color : red; /* Center vertically and horizontally */ position : absolute; top : 50% ; left : 50% ; transform : translate (- 50% , - 50% ); } 

توسيط عنصر div أفقيًا ورأسيًا باستخدام Flexbox

يُعد Flexbox الطريقة الأسهل والأكثر فعالية لتوسيط عنصر ما أفقيًا ورأسيًا في آن واحد. هذه الطريقة هي في الأساس دمج لطريقتي Flexbox السابقتين (التوسيط الأفقي والرأسي بشكل منفصل). لتوسيط العنصر (أو العناصر) الابن أفقيًا ورأسيًا، قم بتطبيق الخاصيتين justify-content: center و align-items: center على العنصر الأب.

 < div class = "container" > < div class = "child" > </ div > </ div > 

 .container { font-family : arial; font-size : 24px ; margin : 25px ; width : 350px ; height : 200px ; outline : dashed 1px black; /* Center vertically and horizontally */ display : flex; justify-content : center; align-items : center; } .child { width : 50px ; height : 50px ; background-color : red; } 

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

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