Выравнивание строковых блоков по горизонтали на одной линии

Проблема

Инлайн-блоки имеют преимущества перед плавающими элементами, такие как выравнивание по базовой линии и автоматическое центрирование когда окно просмотра становится узким. Однако выравнивание двух строчных блоков по горизонтали на одной строке может стать проблемой.

Проблемы с выравниванием строчных блоков

• Плавающие числа могут мешать выравниванию базовой линии и вызывать нежелательный перенос .
• Относительное и абсолютное позиционирование может привести к проблемам с пробелами, как и в случае с плавающей запятой.

Решение: использование выравнивания текста

Одно из эффективных решений включает использование выравнивания текста : метод justify:

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;
}

Объяснение

• Установите для text-align родительского элемента значение «justify», чтобы равномерно распределить текст по ширине.
• Добавьте заголовок псевдо-элемента:after чтобы использовать оставшееся пространство между встроенными блоками.
• Настройте встроенные блоки h1 и .nav для отображения: inline-block и вертикального выравнивания: baseline, чтобы сохранить их базовые линии.