كيفية توسيط أي شيء باستخدام 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; }

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