Alinear bloques en línea horizontalmente en la misma línea

Problema

Los bloques en línea ofrecen ventajas sobre los elementos flotantes, como alineación de línea base y centrado automático cuando la ventana gráfica se vuelve estrecha. Sin embargo, alinear dos bloques en línea horizontalmente en la misma línea puede representar un desafío.

Desafíos de la alineación de bloques en línea

• Los flotadores pueden interferir con la alineación de la línea base y causar un giro no deseado .
• El posicionamiento relativo y absoluto puede provocar problemas de espaciado, similares a los flotantes.

Solución: usar la justificación de texto

Una solución eficaz implica utilizar la alineación de texto : técnica de justificación:

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

Explicación

• Establezca la alineación de texto del elemento principal en "justificar" para distribuir el texto uniformemente en todo su ancho.
• Agregue un encabezado de pseudoelemento:después para consumir el espacio restante entre los bloques en línea.
• Configure los bloques en línea h1 y .nav para mostrar: bloque en línea y alineación vertical: línea base para mantener sus líneas base.