الهامش: تلقائي؛ لا يعمل على عناصر الكتلة المضمنة

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

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

الرمز القديم:

#container {
    /* Other styles... */
}
.center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

في هذا الكود، يكون لعنصر #container عرض محدد ويؤدي إلى سلوك التوسيط المتوقع.

الكود الجديد:

#container {
    /* Other styles... */
    display: inline-block;
}
.center {
    margin: 75px auto;
    position: relative;
}

يؤدي تغيير خاصية عرض #container إلى الحظر المضمن إلى تغيير كيفية تفاعلها مع الهوامش. لا تتصرف عناصر الكتلة المضمنة كعناصر كتلة وتفقد القدرة على التوسيط باستخدام الهامش: تلقائي؛.

الحل:

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

.center {
    text-align: center;
}

سيؤدي هذا إلى محاذاة عنصر الكتلة المضمنة مع مركز عنصر الكتلة الذي يحتوي عليه.