التوسيط المثالي

جزء من قسم Styling with CSS في رحلة HTML على Coddy — الدرس 48 من 76.

في CSS، يعد تحقيق "التوسيط المثالي" - أي توسيط عنصر أفقيًا وعموديًا داخل العنصر الأب - تحديًا شائعًا في التخطيط. يوفر Flexbox حلاً أنيقًا ومباشرًا لهذه المشكلة. من خلال الجمع بين الخاصيتين justify-content و align-items، يمكنك بسهولة توسيط عنصر تابع داخل حاوية flex الخاصة به، بغض النظر عن حجم العنصر التابع أو العنصر الأب.

إليك كيفية تحقيق التوسيط المثالي باستخدام Flexbox:

.container {
    display: flex; /* تحويل العنصر الأب إلى حاوية مرنة (flex container) */
    justify-content: center; /* توسيط العنصر الابن أفقيًا على طول المحور الرئيسي */
    align-items: center; /* توسيط العنصر الابن رأسيًا على طول المحور المتقاطع */
}

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

إليك مثال على كيفية استخدام هذه التقنية في HTML:

<div class="container">
    <div class="child">This is centered</div>
</div>

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px; /* تعيين ارتفاع محدد للحاوية */
    border: 1px solid black; /* اختياري: إضافة حدود للتوضيح البصري */
}

.child {
    padding: 20px;
    border: 1px solid red;
}

في هذا المثال، يحتوي العنصر .container على ارتفاع قدره 300px، وسيكون العنصر .child متمركزاً تماماً أفقياً ورأسياً بداخله.

التحدي

سهل

لقد تم تزويدك بمستند HTML يحتوي على قسم أب (<div>) يضم بداخله قسماً ابناً (<div>). مهمتك هي استخدام Flexbox لتوسيط القسم الابن تماماً داخل القسم الأب. اتبع الخطوات التالية:

اكتب قاعدة CSS تستهدف عنصر <div> الذي يحمل الفئة parent.
قم بتعيين خاصية display لعنصر .parent إلى flex لتحويله إلى حاوية مرنة (flex container).
قم بتعيين خاصية justify-content لعنصر .parent إلى center لتوسيط الابن أفقياً.
قم بتعيين خاصية align-items لعنصر .parent إلى center لتوسيط الابن عمودياً.
امنح عنصر .parent قيمة height قدرها 200px لضمان ظهور التوسيط العمودي.

ورقة مرجعية

لتوسيط عنصر بشكل مثالي أفقيًا وعموديًا باستخدام Flexbox، ادمج justify-content: center و align-items: center:

.container {
    display: flex;
    justify-content: center; /* توسيط أفقيًا */
    align-items: center; /* توسيط عموديًا */
    height: 300px; /* تحديد الارتفاع ليكون التوسيط العمودي مرئيًا */
}

يجب أن يكون لحاوية flex ارتفاع محدد ليكون التوسيط العمودي ظاهرًا.

جرّب بنفسك

<html>
<head>
    <title>The Perfect Center</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">Center Me</div>
    </div>
</body>
</html>