محاذاة الكتل المضمنة أفقيًا على نفس الخط

المشكلة

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

تحديات محاذاة الكتل المضمنة

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

الحل: استخدام ضبط النص

يتضمن أحد الحلول الفعالة استخدام محاذاة النص : ضبط التقنية:

رمز CSS

.header {
    text-align: justify;
    background: #ccc;
}

.header:after {
    content: '';
    display: inline-block;
    width: 100%;
    height: 0;
    font-size: 0;
    line-height: 0;
}

h1 {
    display: inline-block;
    margin-top: 0.321em;
}

.nav {
    display: inline-block;
    vertical-align: baseline;
}

شرح

• اضبط محاذاة نص العنصر الأصلي على "ضبط" لتوزيع النص بالتساوي عبر عرضه.
• أضف رأس عنصر زائف:بعد لاستهلاك المساحة المتبقية بين الكتل المضمنة.
• قم بتعيين الكتل المضمنة h1 و.nav لعرضها: الكتلة المضمنة والمحاذاة العمودية: خط الأساس للحفاظ على خطوط الأساس الخاصة بها.