كيفية توسيط أي شيء باستخدام CSS - محاذاة Div ، والنص ، والمزيد

يعد توسيط الأشياء أحد أصعب جوانب CSS.

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

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

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

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

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

كيفية توسيط النص باستخدام خاصية CSS Text-Align Center

لتوسيط النص أو الروابط أفقيًا ، ما عليك سوى استخدام text-alignالخاصية مع القيمة center:

Hello, (centered) World!

p { text-align: center; }

كيفية توسيط عنصر Div باستخدام CSS Margin Auto

استخدم marginخاصية الاختزال مع القيمة 0 autoلتوسيط عناصر مستوى الكتلة مثل divأفقيًا:

.child { ... margin: 0 auto; }

كيفية توسيط Div أفقيًا باستخدام Flexbox

Flexbox هي الطريقة الأكثر حداثة لتوسيط الأشياء على الصفحة ، وتجعل تصميم التنسيقات سريعة الاستجابة أسهل بكثير مما كانت عليه من قبل. ومع ذلك ، فهو غير مدعوم بالكامل في بعض المتصفحات القديمة مثل Internet Explorer.

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

.container { ... display: flex; justify-content: center; }

كيفية توسيط عموديًا

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

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

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

أولاً ، قم بتعيين displayخاصية العنصر الأصل إلى relative.

ثم لعنصر تابع، تعيين displayالخاصية ل absoluteو topل 50%:

.container { ... position: relative; } .child { width: 50px; height: 50px; background-color: red; /* Center vertically */ position: absolute; top: 50%; }

لكن هذا في الحقيقة يعمل على توسيط الحافة العلوية للعنصر الفرعي عموديًا.

لتوسيط العنصر الفرعي حقًا ، عيِّن margin-topالخاصية على -(half the child element's height):

.container { ... 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 عموديًا باستخدام التحويل والترجمة

إذا كنت لا تعرف ارتفاع العنصر الذي تريد توسيطه (أو حتى إذا كنت تعرفه) ، فهذه الطريقة هي خدعة رائعة.

هذه الطريقة مشابهة جدًا لطريقة الهوامش السالبة أعلاه. عيّن displayخاصية العنصر الأصل إلى relative.

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

.container { ... position: relative; } .child { ... 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العنصر الأصل:

.container { ... display: flex; align-items: center; }

How to Center Both Vertically and Horizontally

How to Center a Div Vertically and Horizontally with CSS Absolute Positioning and Negative Margins

This is very similar to the method above to center an element vertically. Like last time, you must know the width and height of the element you want to center.

Set the display property of the parent element to relative.

Then set the child's display property to absolute, top to 50%, and left to 50%. This just centers the top left corner of the child element vertically and horizontally.

To truly center the child element, apply a negative top margin set to half the child element's height, and a negative left margin set to half the child element's width:

.container { ... 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 */ }

How to Center a Div Vertically and Horizontally with Transform and Translate

Use this method to center an element vertically and horizontally if you don't know its exact dimensions and can't use Flexbox.

First, set the display property of the parent element to relative.

Next, set the child element's display property to absolute, top to 50%, and left to 50%.

Finally, use transform: translate(-50%, -50%) to truly center the child element:

.container { ... position: relative; } .child { ... position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

How to Center a Div Vertically and Horizontally with Flexbox

Flexbox is the easiest way to center an element both vertically and horizontally.

This is really just a combination of the two previous Flexbox methods. Then apply justify-content: center and align-items: center to center the child element(s) horizontally and vertically:

.container { ... display: flex; justify-content: center; align-items: center; }

هذا كل ما تحتاج إلى معرفته للتوسيط مع أفضل ما في الأمر. اذهب الآن وركز كل الأشياء.