Alinhando blocos embutidos horizontalmente na mesma linha

Problema

Blocos embutidos oferecem vantagens sobre elementos flutuantes, como alinhamento de linha de base e centralização automática quando a janela de visualização se torna estreita. No entanto, alinhar dois blocos embutidos horizontalmente na mesma linha pode representar um desafio.

Desafios do alinhamento de blocos embutidos

• Os flutuadores podem interferir no alinhamento da linha de base e causar contornos indesejados .
• O posicionamento relativo e absoluto pode levar a problemas de espaçamento, semelhantes aos pontos flutuantes.

Solução: usando justificação de texto

Uma solução eficaz envolve a utilização do alinhamento de texto : justificar técnica:

Código 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;
}

Explicação

• Defina o alinhamento de texto do elemento pai como "justificar" para distribuir o texto uniformemente em sua largura.
• Adicione um cabeçalho de pseudoelemento:depois para consumir o espaço restante entre os blocos inline.
• Defina os blocos inline h1 e .nav para exibir: bloco inline e alinhamento vertical: linha de base para manter suas linhas de base.