شريط الأخبار [ticker]

How to center a Div in HTML and CSS? | شرح توسيط الحاويات باستخدام HTML&CSS


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

مقدمة

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

لماذا نوسّط عنصر div؟

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

طرق توسيط عنصر div

  1. هناك عدة طرق لتوسيط عنصر div في HTML وCSS. سنغطي التقنيات التالية:
  2. استخدام margin: auto;
  3. استخدام Flexbox
  4. استخدام Grid Layout
  5. استخدام CSS Transform
  6. استخدام Text-Align
  7. استخدام Position و Negative Margin

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


1. استخدام margin: auto;

تعتبر طريقة margin: auto; واحدة من أبسط الطرق لتوسيط عنصر div أفقيًا. تعمل عن طريق تعيين الهوامش اليسرى واليمنى إلى auto، مما يوزع المساحة المتاحة بالتساوي على كلا الجانبين.


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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Center a Div Horizontally</title>
    <style>
        .center-horizontally {
            width: 50%;
            margin: 0 auto;
            background-color: #f0f0f0;
            text-align: center;
            padding: 20px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="center-horizontally">
        This div is centered horizontally.
    </div>
</body>
</html>

عرض نتيجة الكود


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

التوسيط العمودي

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Center a Div Vertically</title>
    <style>
        .container {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .center-vertically {
            width: 50%;
            background-color: #f0f0f0;
            text-align: center;
            padding: 20px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="center-vertically">
            This div is centered vertically.
        </div>
    </div>
</body>
</html>

عرض نتيجة الكود


في هذا المثال، نستخدم حاوية flex لتوسيط العنصر div عموديًا. يعين height: 100vh; أن تأخذ الحاوية كامل ارتفاع الشاشة. خصائص display: flex;، justify-content: center;، وalign-items: center; تضمن أن العنصر div يتم توسيطه أفقيًا وعموديًا داخل الحاوية.


2. استخدام Flexbox

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Center a Div Horizontally with Flexbox</title>
    <style>
        .flex-container {
            display: flex;
            justify-content: center;
        }
        .center-flex-horizontally {
            width: 50%;
            background-color: #f0f0f0;
            text-align: center;
            padding: 20px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="flex-container">
        <div class="center-flex-horizontally">
            This div is centered horizontally with Flexbox.
        </div>
    </div>
</body>
</html>

عرض نتيجة الكود


في هذا المثال، نستخدم Flexbox لتوسيط العنصر div أفقيًا. خصائص display: flex; وjustify-content: center; الخاصة بالحاوية تضمن أن العنصر div يتم توسيطه.

التوسيط العمودي

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Center a Div Vertically with Flexbox</title>
    <style>
        .flex-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .center-flex-vertically {
            width: 50%;
            background-color: #f0f0f0;
            text-align: center;
            padding: 20px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="flex-container">
        <div class="center-flex-vertically">
            This div is centered vertically with Flexbox.
        </div>
    </div>
</body>
</html>

عرض نتيجة الكود


في هذا المثال، نستخدم Flexbox لتوسيط العنصر div عموديًا. خاصية align-items: center; الخاصة بالحاوية تضمن أن العنصر div يتم توسيطه عموديًا داخل الحاوية.

التوسيط الأفقي والعمودي معًا

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Center a Div with Flexbox</title>
    <style>
        .flex-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .center-flex {
            width: 50%;
            background-color: #f0f0f0;
            text-align: center;
            padding: 20px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="flex-container">
        <div class="center-flex">
            This div is centered both horizontally and vertically with Flexbox.
        </div>
    </div>
</body>
</html>

عرض نتيجة الكود


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


3. استخدام Grid Layout

CSS Grid Layout هو نظام تخطيط قوي آخر يتيح لك إنشاء تخطيطات معقدة بسهولة. يوفر طريقة مباشرة لتوسيط العناصر.

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Center a Div Horizontally with Grid</title>
    <style>
        .grid-container {
            display: grid;
            place-items: center;
            height: 100vh;
        }
        .center-grid-horizontally {
            width: 50%;
            background-color: #f0f0f0;
            text-align: center;
            padding: 20px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="center-grid-horizontally">
            This div is centered horizontally with Grid.
        </div>
    </div>
</body>
</html>

عرض نتيجة الكود


في هذا المثال، نستخدم CSS Grid Layout لتوسيط العنصر div أفقيًا. خاصية place-items: center; تضمن توسيط العنصر أفقيًا وعموديًا، ولكن بما أننا نركز على التوسيط الأفقي، فإنه يحقق النتيجة المطلوبة.


4. استخدام التحويل في CSS

يسمح لك التحويل في CSS بتغيير مظهر العناصر وموضعها. يمكنك استخدام خاصية التحويل (transform) لتوسيط عنصر div.

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

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width، initial-scale=1.0">
    <title>توسيط عنصر div أفقيًا باستخدام التحويل</title>
    <style>
        .center-transform-horizontally {
            width: 50%;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            background-color: #f0f0f0;
            text-align: center;
            padding: 20px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="center-transform-horizontally">
        هذا العنصر div تم توسيطه أفقيًا باستخدام التحويل.
    </div>
</body>
</html>

عرض نتيجة الكود


في هذا المثال، الخصائص left: 50%; و transform: translateX(-50%); تقوم بتوسيط العنصر أفقيًا. خاصية position: absolute; تقوم بتحديد موضع العنصر بالنسبة لأقرب عنصر محدد الموضع.

التوسيط الرأسي

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width، initial-scale=1.0">
    <title>توسيط عنصر div رأسيًا باستخدام التحويل</title>
    <style>
        .center-transform-vertically {
            width: 50%;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: #f0f0f0;
            text-align: center;
            padding: 20px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="center-transform-vertically">
        هذا العنصر div تم توسيطه رأسيًا باستخدام التحويل.
    </div>
</body>
</html>

عرض نتيجة الكود


في هذا المثال، الخصائص top: 50%; و transform: translateY(-50%); تقوم بتوسيط العنصر رأسيًا. خاصية position: absolute; تقوم بتحديد موضع العنصر بالنسبة لأقرب عنصر محدد الموضع.

التوسيط الأفقي والرأسي معًا

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width، initial-scale=1.0">
    <title>توسيط عنصر div باستخدام التحويل</title>
    <style>
        .center-transform {
            width: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #f0f0f0;
            text-align: center;
            padding: 20px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="center-transform">
        هذا العنصر div تم توسيطه أفقيًا ورأسيًا باستخدام التحويل.
    </div>
</body>
</html>

عرض نتيجة الكود


في هذا المثال، الخصائص top: 50%;، left: 50%;، و transform: translate(-50%, -50%); تقوم بتوسيط العنصر أفقيًا ورأسيًا. خاصية position: absolute; تقوم بتحديد موضع العنصر بالنسبة لأقرب عنصر محدد الموضع.


5. استخدام خاصية Text-Align

خاصية text-align تُستخدم عادةً لتوسيط النص، ولكن يمكن أيضًا استخدامها لتوسيط العناصر الكتلية داخل الحاوية.


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

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width، initial-scale=1.0">
    <title>توسيط عنصر div أفقيًا باستخدام خاصية Text-Align</title>
    <style>
        .container {
            text-align: center;
        }
        .center-text-align {
            display: inline-block;
            width: 50%;
            background-color: #f0f0f0;
            text-align: center;
            padding: 20px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="center-text-align">
            هذا العنصر div تم توسيطه أفقيًا باستخدام خاصية Text-Align.
        </div>
    </div>
</body>
</html>

عرض نتيجة الكود


في هذا المثال، الحاوية لديها خاصية text-align: center;، والعنصر div لديه خاصية display: inline-block;. هذا يقوم بتوسيط العنصر أفقيًا داخل الحاوية.


6. استخدام الخاصية Position والهوامش السلبية

استخدام الخاصية position والهوامش السلبية هي طريقة أخرى لتوسيط عنصر div أفقيًا ورأسيًا.


التوسيط الأفقي والرأسي معًا

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width، initial-scale=1.0">
    <title>توسيط عنصر div باستخدام Position والهوامش السلبية</title>
    <style>
        .center-position {
            width: 50%;
            height: 200px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -100px; /* نصف الارتفاع */
            margin-left: -25%; /* نصف العرض */
            background-color: #f0f0f0;
            text-align: center;
            padding: 20px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="center-position">
        هذا العنصر div تم توسيطه أفقيًا ورأسيًا باستخدام Position والهوامش السلبية.
    </div>
</body>
</html>

عرض نتيجة الكود


في هذا المثال، الخصائص top: 50%; و left: 50%; تقوم بتحديد موضع العنصر في منتصف الحاوية. الخصائص margin-top: -100px; و margin-left: -25%; تقوم بتوسيط العنصر عن طريق إزاحته بمقدار نصف ارتفاعه وعرضه على التوالي.


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

الفروقات الأساسية
الطريقة
الاستخدام
التوسيط الأفقي
التوسيط الرأسي
سهولة الاستخدام
التوافق مع المتصفحات
ملاحظات
margin:auto;
عندما يكون العرض معروف ومُحدد
نعم لا سهلة متوافق مع جميع المتصفحات
يجب تحديد عرض العنصر
Flexbox
لتوسيط عناصر متعددة في حاوية
نعم نعم سهلة جداً
متوافق مع المتصفحات الحديثة
يدعم تخطيطات معقدة
Grid Layout
لتخطيطات شبكية مُعقدة
نعم نعم سهلة جداً
متوافق مع المتصفحات الحديثة
مرن للغاية للتخطيطات المقعدة
CSS Transform
لتوسيط عنصر مطلق الموضع
نعم نعم متوسطة متوافق مع جميع المتصفحات
يحتاج
position: absolute;
Text-Align
لتوسيط النصوص و
Block Elements
 نعم
لا سهلة متوافق مع جميع المتصفحات
مفيد لتوسيط النصوص والعناصر
inline - block
Positive&Negative Margin
لتوسيط عنصر ذات خاصية
position: absolute
نعم
نعم متوسطة متوافق مع جميع المتصفحات
يتطلب حسابات للهوامش السلبية

ما هي الطريقة الأنسب لك؟

من واقع الخبرة العملية، اختيار الطريقة المناسبة لتوسيط الحاويات في HTML وCSS يعتمد على عدة عوامل، مثل نوع الحاوية، ومتطلبات التوافق مع المتصفحات، وسهولة الصيانة، وطبيعة التخطيط (layout). فيما يلي نظرة على الطرق المختلفة ومتى يمكن استخدامها:

1. Margin Auto

متى تستخدم:

عندما تريد طريقة بسيطة وفعّالة لتوسيط العناصر الكتلية (block elements) أفقياً داخل الحاوية.

مناسبة عندما تكون لديك حاوية ذات عرض محدد.

2. Flexbox

متى تستخدم:

عندما تحتاج إلى توسيط العناصر أفقياً وعمودياً داخل حاوية.

مثالية لتصميمات الاستجابة (responsive designs) حيث يمكنها التعامل مع تغييرات الحجم بسهولة.

قوية جداً للترتيب المعقد للعناصر داخل الحاوية.

3. Grid Layout

متى تستخدم:

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

مناسبة جداً للتخطيطات التي تحتاج إلى توزيع العناصر بشكل منتظم.

4. CSS Transform

متى تستخدم:

عندما تحتاج إلى توسيط عنصر أفقياً وعمودياً بشكل بسيط وسريع داخل حاوية بموضع مطلق (absolute position).

مفيدة للحالات التي لا تحتاج فيها إلى تعقيدات Flexbox أو Grid.

5. Text-Align

متى تستخدم:

لتوسيط العناصر العرضية (inline elements) أو العناصر الكتلية (block elements) داخل حاوية.

مفيدة عند التعامل مع النصوص والعناصر الصغيرة داخل حاوية أكبر.

6. Position and Negative Margin

متى تستخدم:

عندما تحتاج إلى توسيط عنصر أفقياً وعمودياً داخل حاوية بموضع مطلق (absolute position) وارتفاع ثابت.

مفيدة للحالات البسيطة حيث تحتاج إلى التحكم الدقيق في موضع العناصر.

الاستنتاج:

الاختيار بين هذه الطرق يعتمد على متطلبات المشروع الخاص بك، وميزانية الوقت والصيانة، والتعقيد المطلوب. غالباً ما تكون Flexbox وGrid Layout هما الخيارين الأكثر مرونة وقوة، بينما تكون Margin Auto وCSS Transform مناسبتين للحالات البسيطة.

الخاتمة

يمكن تحقيق توسيط عنصر div في HTML و CSS باستخدام طرق متعددة. كل تقنية لها نقاط قوتها وتناسب سيناريوهات مختلفة. سواء اخترت استخدام margin: auto;، Flexbox، Grid Layout، CSS Transform، Text-Align، أو Position والهوامش السلبية، فإن فهم هذه الأساليب سيساعدك في إنشاء تصاميم متوازنة وجذابة بصريًا.

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

المراجع

MDN Web Docs — CSS: Cascading Style Sheets

CSS-Tricks — A Complete Guide to Flexbox

CSS-Tricks — A Complete Guide to Grid

W3Schools — CSS

MDN Web Docs — Using CSS Flexible Boxes

MDN Web Docs — CSS Grid Layout

nilebits

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


تعليقات

إرسال تعليق

إرسال تعليق

قد يهمك ايضا [related]

© 2020 – 2024 جميع الحقوق محفوظة Mohab