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

المقال الاصلي بكتابة Kris Koishigawa

تمت الترجمة بواسطة Omar Ashinawy

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

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

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

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

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

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

كيفية توسيط النصوص بخاصية 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 Auto

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

<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 هي الطريقة الأكثر حداثة لتوسيط العناصر على الصفحة، فهي تجعل التصاميم المتجاوبة (responsive layouts) أسهل كثيرا مما كانت عليه. مع ذلك، فهذه الطريقة ليست مدعومة كليا في بعض المتصفحات القديمة مثل Internet Explorer.

لتوسيط عنصر أفقيا بواسطة Flexbox، استخدم display: flex و justify-content: center في ال parent element.

ال 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;
}

كيفية التوسيط رأسيا

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

كيفية توسيط Div رأسيا باستخدام Absolute Positioning و Negative Margins

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

أولا: اجعل قيمة الخاصية position للعنصر parent element مساوية للقيمة relative.

ثم للعنصر child element الذي هو بداخل ال parent element، اجعل قيمتي الخاصيتين position و top مساويتين للقيمتين absolute و 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%;
}

ولكن هذا يوسّط رأسيا الطرف العلوي فقط للعنصر child element.

فلكي توسط العنصر child element باكمله، اجعل قيمة الخاصية margin-top مساوية لسالب نصف ارتفاع العنصر (half the child element's height)-

.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

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

هذه الطريقة تشيه كثيرا طريقة الهوامش السالبة (negative margins). اجعل قيمة الخاصية postion للعنصر Parent element مساوية للقيمة relative.

للعنصر Child element، اجعل قيمتي الخاصيتين position و top مساويتين للقيمتين absolute و 50%.

وبدلا من استخدام هامش سالب (negative margin) لتوسيط العنصر child element فعليا، استخدم 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%) لتوسيط العنصر child element رأسيا.

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

كتوسيط العناصر أفقيا، Flexbox يسهل التوسيط الرأسي كثيرا.

لتوسيط عنصر رأسيا، استخدم display: flex و align-items: 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 vertically */
  display: flex;
  align-items: center;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
}

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

كيفية توسيط Div رأسيا وأفقيا باستخدام Absolute Positioning و Negative Margins

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

اجعل قيمة الخاصية position للعنصر parent element مساوية للقيمة relative.

ثم اجعل قيم خواص العنصر (child element) position و top و left مساوية للقيم absolute و 50% و 50% على الترتيب. هذه الطريقة توسط رأسيا وأفقيا الركن في أعلى يسار العنصر child element فقط.

فلكي توسط العنصر child element باكمله، استخدم هامشا علويا (top margin) سالبا بقيمة نصف ارتفاع العنصر child element، وهامشا على اليسار (left margin) سالبا بقيمة نصف عرض العنصر child 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;
  /* 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 للعنصر parent element مساوية للقيمة relative.

ثم للعنصر child element، اجعل قيمتي الخاصيتين position و top مساويتين للقيمتين absolute و 50% على الترتيب:

وأخيرا، استعمل transform: translate(-50%, -50%) لكي توسط العنصر child 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;
  /* 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 السابقتين. لتوسطَ العنصر child element أفقيا ورأسيا، استخدم

justify-content: center و align-items: 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 vertically and horizontally */
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
}

هذا كل شيء تحتاج معرفته لتوسيط العناصر.