كيفية توسيط DIV باستخدام CSS [5 طرق سريعة]

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

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

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

ما هو DIV ولماذا تفكر في توسيط DIV؟

يعد div أو القسمة عنصر HTML أساسيًا يعمل كحاوية لتجميع العناصر الأخرى في صفحة الويب.

ما عليك سوى التفكير في الأمر كمربع يمكنك استخدامه لتنظيم المحتوى مثل النص أو الصور أو العناصر الأخرى. تعتبر Div ضرورية لتنظيم المحتوى وتصميمه على صفحات الويب الخاصة بك، مما يجعلها أكثر تنظيمًا وجاذبية من الناحية المرئية.

لماذا تفكر في توسيط Div؟

يعد توسيط div أمرًا مهمًا للغاية من وجهة نظر تجربة المستخدم. ولكن يمكن أن يمثل ذلك تحديًا في التصميم لمطوري الويب لأنه يمكن أن يؤدي إلى تحسين شكل صفحة الويب وتخطيطها بشكل كبير.

إليك سبب أهمية التركيز:

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

كيفية توسيط DIV باستخدام CSS (طرق مختلفة)

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

فيما يلي بعض الطرق الأكثر شيوعًا لتوسيط div باستخدام CSS:

الطريقة الأولى: كيفية توسيط Div باستخدام الهوامش التلقائية

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

1. ما تحتاج إلى معرفته

لتوسيط div أفقيًا باستخدام الهوامش التلقائية، اتبع الخطوات التالية:

• 1. تقييد العرض: أولاً، تأكد من أن div الخاص بك لا يشغل العرض الكامل لحاويته. بشكل افتراضي، يتم توسيع div لملء العرض بالكامل. لتوسيطها، تحتاج إلى تعيين الحد الأقصى للعرض.

• 2. استخدم الهوامش التلقائية: ستؤدي الهوامش التلقائية على الجانبين الأيسر والأيمن إلى دفع div إلى المنتصف.

إليك مثال بسيط:

أتش تي أم أل

<div class="centered-div">This is a centered div</div>

المغلق

.centered-div {

max-width: fit-content; /* Makes the div only as wide as its content */

margin-left: auto; /* Pushes the div to the right */

margin-right: auto; /* Pushes the div to the left, centering it */
}

2. لماذا نستخدم max-width: fit-content; ؟

max-width: fit-content; تتأكد القاعدة من أن div لا يشغل إلا القدر الذي يحتاجه من العرض، بناءً على محتواه. إذا استخدمت عرضًا ثابتًا، مثل 200px ، فقد يتجاوز div إذا كانت الحاوية ضيقة جدًا. يقوم fit-content بضبط حجم div ديناميكيًا ليناسب محتواه.

3. كيف تعمل الهوامش التلقائية؟

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

عندما يتم تعيين كلا الهامش على auto ، فإنهما يتقاسمان المساحة الإضافية بالتساوي، والتي يتم توسيط div .

4. استخدام الاختصار الحديث: margin-inline

بدلاً من تعيين margin-left margin-right بشكل منفصل، يمكنك استخدام خاصية margin-inline للحصول على نهج أكثر نظافة:

.centered-div {

أقصى عرض: محتوى مناسب؛

الهامش المضمن: تلقائي؛ /* ضبط الهوامش اليمنى واليسرى تلقائيًا على الوضع التلقائي */

}

الطريقة الثانية: كيفية توسيط DIV باستخدام Flexbox

يعمل Flexbox على تسهيل توسيط العناصر في كلا الاتجاهين. إليك كيفية توسيط عنصر واحد باستخدام Flexbox:

.حاوية {

العرض: فليكس؛

ضبط المحتوى: مركز؛ /* توسيط أفقيا */

محاذاة العناصر: مركز؛ /* المراكز عموديا */

}

في هذا المثال، تم تعيين .container لاستخدام Flexbox. تقوم خاصية justify-content: center بتوسيط العنصر أفقيًا، بينما align-items: center بتوسيط العنصر عموديًا.

بعض النقاط الرئيسية التي يجب مراعاتها:

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

عناصر متعددة : يتعامل Flexbox أيضًا مع عناصر متعددة بشكل جيد. يمكنك استخدام flex-direction: row لتكديس العناصر في صف أو flex-direction : العمود للمكدس الرأسي. يمكن أن تؤدي إضافة gap إلى ضبط التباعد بين العناصر.

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

الطريقة الثالثة: كيفية توسيط DIV في إطار العرض

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

1. التمركز الأساسي مع الوضعية الثابتة

لتوسيط عنصر أفقيًا وعموديًا، استخدم الخطوات التالية:

• تعيين الموضع إلى ثابت:

- position: fixed; يجعل العنصر يبقى في مكانه أثناء التمرير. إنه مثل لصق العنصر على الشاشة.

• استخدم Inset للإرساء:

- inset: 0px; هو اختصار لتعيين مسافة العنصر من حواف إطار العرض (أعلى، يمين، أسفل، يسار) إلى 0 بكسل. يؤدي هذا إلى تمديد العنصر لملء الشاشة بأكملها.

• حجم القيد :

– ضبط width height لتحديد حجم العنصر.

- استخدم max-width والحد max-height للتأكد من عدم تجاوزه على الشاشات الصغيرة.

• مركز بهوامش تلقائية : – margin: auto; توسيط العنصر. فهو يقسم المساحة الإضافية حوله بالتساوي، مع التأكد من بقائه في المنتصف.

رمز المثال:

.عنصر {

الموقف: ثابت؛

أقحم: 0؛ /* تثبيت العنصر على جميع الحواف */

العرض: 12ريم؛ /* تعيين عرض ثابت */

الارتفاع: 5ريم؛ /* تعيين ارتفاع ثابت */

أقصى عرض: 100 فولت واط؛ /* التأكد من عدم تجاوز عرض إطار العرض */

أقصى ارتفاع: 100dvh؛ /* التأكد من عدم تجاوز ارتفاع إطار العرض */

الهامش: تلقائي؛ /* توسيط العنصر */

}

2. التوسيط أفقيًا فقط

إذا كنت تريد فقط توسيط عنصر أفقيًا (على سبيل المثال، شعار ملف تعريف الارتباط في الأسفل)، فقم بذلك:

• الموقف ثابت:

- position: fixed; يحافظ على العنصر في مكانه.

• مرساة إلى الحواف:

- استخدم left: 0; right: 0; لتمديده من جانب إلى آخر أفقيًا.

- تعيين bottom: 8px; لوضعه من الحافة السفلية.

• القيد والمركز:

– ضبط عرض ثابت.

– استخدام margin-inline: auto; لتوسيطها أفقيا.

رمز المثال:

.element {

position: fixed;

left: 0;

right: 0;

bottom: 8px; /* Positions from the bottom edge */

width: 12rem; /* Sets a fixed width */

max-width: calc(100vw - 16px); /* Ensures it fits within the viewport with some buffer */

margin-inline: auto; /* Centers horizontally */

}

3. توسيط العناصر ذات الأحجام غير المعروفة

إذا كنت لا تعرف حجم العنصر، ولكنك لا تزال تريد توسيطه:

• استخدم المحتوى المناسب:

- width: fit-content; height: fit-content; السماح للعنصر بالتقلص حول محتواه.

• تطبيق التمركز:

- الجمع مع position: fixed; margin: auto; لتوسيطها.

رمز المثال:

.element {

position: fixed;

inset: 0;

width: fit-content; /* Shrinks to fit content */

height: fit-content; /* Shrinks to fit content */

margin: auto; /* Centers the element */

}

باستخدام هذه الطرق، يمكنك بسهولة توسيط العناصر في إطار العرض، بغض النظر عن حجمها.

الطريقة الرابعة: كيفية توسيط DIV باستخدام شبكة CSS

تعد CSS Grid أداة قوية لتصميم التخطيط، وهي مفيدة بشكل خاص لتوسيط العناصر. إليك كيفية توسيط شيء ما بسهولة أفقيًا وعموديًا باستخدام CSS Grid:

1. توسيط عنصر واحد

لتوسيط عنصر داخل الحاوية الخاصة به، يمكنك استخدام إعداد بسيط باستخدام CSS Grid:

• إعداد عرض الشبكة:

- display: grid; يحول الحاوية إلى شبكة.

• استخدم محتوى المكان:

- place-content: center; هو اختصار يقوم بتوسيط المحتوى أفقيًا وعموديًا. يقوم بتعيين كل من justify-content (أفقيًا) ومحتوى align-content (عموديًا) إلى center .

رمز المثال:

css

.حاوية {

العرض: الشبكة؛

محتوى المكان: المركز؛ /* توسيط المحتوى أفقيًا وعموديًا */

}

وهذا يجعل العنصر موجودًا في منتصف الحاوية الخاصة به، بغض النظر عن حجمه.

2. الاختلافات عن Flexbox

على الرغم من أن CSS Grid يمكنها توسيط العناصر، إلا أنها تتصرف بشكل مختلف مقارنةً بـ Flexbox:

- Flexbox: توسيط العناصر بناءً على حجمها وحجم الحاوية.

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

رمز المثال في الشبكة مع النسب المئوية:

css

.حاوية {

العرض: الشبكة؛

محتوى المكان: المركز؛

}

.عنصر {

العرض: 50%؛ /* العرض هو 50% من خلية الشبكة */

الارتفاع: 50%؛ /* الارتفاع هو 50% من خلية الشبكة */

}

إذا لم يتم تحديد حجم خلية الشبكة، فقد يصبح العنصر أصغر من المتوقع. غالبًا ما يكون Flexbox أبسط بالنسبة للتمركز الأساسي.

3. توسيط عناصر متعددة

يمكن لـ CSS Grid أيضًا التعامل مع عناصر متعددة في نفس الخلية:

• تعيين عناصر متعددة لنفس الخلية:

- استخدم grid-row grid-column لوضع العناصر في نفس خلية الشبكة.

• عناصر المركز داخل الخلية:

- إضافة place-items: center; لتوسيط العناصر داخل خلية الشبكة.

رمز المثال:

css

.حاوية {

العرض: الشبكة؛

محتوى المكان: المركز؛ /* توسيط خلية الشبكة */

عناصر المكان: المركز؛ /* توسيط العناصر داخل الخلية */

}

.عنصر {

صف الشبكة: 1؛

عمود الشبكة: 1؛ /* يتم وضع جميع العناصر في نفس الخلية */

}

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

النقاط الرئيسية

- تعد CSS Grid رائعة للتخطيطات المعقدة وعندما تحتاج إلى تحكم دقيق في الموضع.

- عادةً ما يكون Flexbox أبسط لمهام التمركز المباشرة.

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

الطريقة الخامسة: كيفية توسيط النص في CSS

يختلف توسيط النص قليلاً عن توسيط العناصر الأخرى مثل الصور أو divs. إليك طريقة بسيطة لإنجاز ذلك:

توسيط كتلة من النص

عندما تريد توسيط كتلة من النص داخل حاوية (مثل فقرة في div)، فإنك تستخدم خاصية text-align . يعمل هذا بشكل أفضل عندما يكون النص ضمن عنصر على مستوى الكتلة، مثل div أو p أو h1 .

وإليك كيفية القيام بذلك:

css

.حاوية {

محاذاة النص: مركز؛

}

يخبر هذا الرمز المتصفح بتوسيط النص داخل الحاوية. إذا كنت تريد أيضًا توسيط الحاوية نفسها، فيمكنك استخدام Flexbox أو Grid لذلك:

css

.حاوية {

العرض: فليكس؛

ضبط المحتوى: مركز؛

محاذاة العناصر: مركز؛

الارتفاع: 100 فولت؛ /* يجعل الحاوية ذات ارتفاع كامل للتوسيط العمودي */

}

ماذا عن Flexbox وGrid؟

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

توسيط النص باستخدام Flexbox

إذا كنت تستخدم Flexbox لتوسيط فقرة، مثل هذا:

css

.حاوية {

العرض: فليكس؛

ضبط المحتوى: مركز؛

محاذاة العناصر: مركز؛

الارتفاع: 100 فولت؛

}

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

ميزات CSS المستقبلية

هناك تطور مثير في CSS! تأتي ميزات جديدة من شأنها أن تجعل التوسيط أسهل. في الوقت الحالي، استخدم Flexbox أو Grid مع text-align: center; هي أفضل طريقة للتعامل معها.

يساعد هذا الأسلوب البسيط في الحفاظ على مظهر النص جيدًا ومركزًا بغض النظر عن مكان وجوده على صفحتك!

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

خاتمة

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

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

إذا كانت لديك أي استفسارات أو شكوك بخصوص هذا المنشور، فيرجى إبلاغنا بها في قسم التعليقات أدناه:

راهول

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