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

كيفية توسيط Div أفقيًا باستخدام CSS
كيفية توسيط Div أفقيًا باستخدام CSS
Mia Chevalier
الأحد، ١٦ يونيو ٢٠٢٤ ١:٣٠:٠٤ ص

إتقان محاذاة Div مع CSS

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

داخل آخر
باستخدام CSS.

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

يأمر وصف
display: flex; يحدد الحاوية المرنة ويمكّن تخطيط flexbox.
justify-content: center; توسيط العناصر أفقيًا داخل حاوية مرنة.
align-items: center; توسيط العناصر عموديًا داخل حاوية مرنة.
place-items: center; توسيط العناصر أفقيًا وعموديًا في حاوية الشبكة.
transform: translate(-50%, -50%); يقوم بإزاحة عنصر بنسبة 50% من عرضه وارتفاعه لتوسيطه.
position: absolute; يضع عنصرًا بالنسبة إلى أقرب سلف له.
top: 50%; يضع العنصر على مسافة 50% من أعلى العنصر الذي يحتوي عليه.
left: 50%; يضع العنصر على مسافة 50% من يسار العنصر الذي يحتوي عليه.

توسيط العناصر باستخدام Flexbox وGrid وCSS التقليدي

يوضح البرنامج النصي الأول كيفية توسيط أ

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

في النص الثاني نستخدم CSS Grid لتحقيق نتائج مماثلة. عن طريق التقديم display: grid; إلى الحاوية الأم و place-items: center;، يتم توسيط العناصر الفرعية أفقيًا وعموديًا. هذه الطريقة مفيدة بشكل خاص للتخطيطات المستندة إلى الشبكة. وأخيرا، الطريقة التقليدية تنطوي على الإعداد position: absolute; على العنصر الفرعي واستخدامه top: 50%; و left: 50%; مع transform: translate(-50%, -50%); لتوسيطها داخل الأصل. هذا الأسلوب فعال للعناصر ذات الحجم الثابت.

استخدام Flexbox لتوسيط Div أفقيًا

HTML وCSS مع Flexbox

<!DOCTYPE html>
<html>
<head>
<title>Flexbox Centering</title>
<style>
#outer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  border: 1px solid black;
}
#inner {
  padding: 20px;
  background-color: lightblue;
  border: 1px solid blue;
}</style>
</head>
<body>
<div id="outer">
  <div id="inner">Foo foo</div>
</div>
</body>
</html>

توسيط Div باستخدام CSS Grid

HTML وCSS مع تخطيط الشبكة

<!DOCTYPE html>
<html>
<head>
<title>Grid Centering</title>
<style>
#outer {
  display: grid;
  place-items: center;
  height: 100vh;
  border: 1px solid black;
}
#inner {
  padding: 20px;
  background-color: lightgreen;
  border: 1px solid green;
}</style>
</head>
<body>
<div id="outer">
  <div id="inner">Foo foo</div>
</div>
</body>
</html>

الطريقة التقليدية للتوسيط مع CSS

HTML وCSS مع هامش تلقائي

<!DOCTYPE html>
<html>
<head>
<title>Traditional Centering</title>
<style>
#outer {
  width: 100%;
  height: 100vh;
  border: 1px solid black;
  position: relative;
}
#inner {
  width: 50px;
  padding: 20px;
  background-color: lightcoral;
  border: 1px solid red;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}</style>
</head>
<body>
<div id="outer">
  <div id="inner">Foo foo</div>
</div>
</body>
</html>

التقنيات المتقدمة لتوسيط العناصر

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

بالإضافة إلى ذلك، يمكنك استخدام margin: auto; خاصية توسيط العناصر على مستوى الكتلة. من خلال ضبط الهوامش اليمنى واليسرى لعنصر ما على الوضع التلقائي، يمكنك توسيطه أفقيًا داخل الحاوية الأصلية الخاصة به. هذه التقنية بسيطة وتعمل بشكل جيد مع العناصر ذات العرض الثابت. يوفر الجمع بين هذه الأساليب وتقنيات تخطيط CSS الحديثة مثل Flexbox وGrid مجموعة أدوات شاملة لمحاذاة العناصر بدقة حسب الحاجة.

أسئلة وأجوبة شائعة حول توسيط العناصر

  1. كيف يمكنني توسيط عنصر مضمن؟
  2. يستخدم text-align: center; على الحاوية الأصل لتوسيط العناصر المضمنة.
  3. هل يمكنني استخدام الهامش: تلقائي؛ لتوسيط عنصر الكتلة؟
  4. نعم، الإعداد margin: auto; على الجانبين الأيسر والأيمن سوف يتم توسيط عنصر الكتلة.
  5. ما هو الفرق بين Flexbox وGrid للتمركز؟
  6. Flexbox يستخدم للتخطيطات أحادية البعد، بينما Grid مخصص للتخطيطات ثنائية الأبعاد.
  7. كيف يمكنني توسيط عنصر ذو عرض ثابت باستخدام CSS؟
  8. يستخدم margin: auto; أو position: absolute; مع transform: translate(-50%, -50%);
  9. هل يمكنني توسيط العناصر عموديًا باستخدام Flexbox؟
  10. نعم استخدم align-items: center; لتوسيط العناصر عموديًا في حاوية مرنة.
  11. هل تتم محاذاة النص: center؛ العمل لعناصر الكتلة؟
  12. لا، text-align: center; يعمل فقط مع العناصر المضمنة أو المضمنة.
  13. كيف أقوم بتوسيط عناصر متعددة في الحاوية؟
  14. يستخدم display: flex; مع justify-content: center; و align-items: center;
  15. ما هي عناصر المكان: المركز؛ في الشبكة؟
  16. place-items: center; توسيط العناصر أفقيًا وعموديًا في حاوية الشبكة.
  17. هل من الممكن توسيط العناصر بدون Flexbox أو Grid؟
  18. نعم، باستخدام أساليب مثل margin: auto;, text-align: center;، أو position: absolute; يمكن أيضًا توسيط العناصر.

اختتام تقنيات توسيط CSS

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