css - imagen - ¿Cómo alinear verticalmente 2 tamaños diferentes de texto?

centrar texto vertical y horizontal css

Question

Sé alinear verticalmente el texto al centro de un bloque, estableces la altura de la línea a la misma altura del bloque.

Sin embargo, si tengo una oración con una palabra en el medio, eso es 2em . Si toda la oración tiene una altura de línea igual que el bloque que lo contiene, entonces el texto más grande se alinea verticalmente, pero el texto más pequeño está en la misma línea base que el texto más grande.

¿Cómo puedo configurarlo para que ambos tamaños de texto estén alineados verticalmente, por lo que el texto más grande estará en una línea de base más baja que el texto más pequeño?

Answer 1

Esto funciona

header > span {
    margin: 0px 12px 0px 12px;
    vertical-align:middle;
}
.responsive-title{
    font-size: 12vmin;
    line-height: 1em;
}
.responsive-subtitle{
    font-size: 6vmin;
    line-height: 2em;
}

<header>
  <span class="responsive-title">Foo</span>
  <span class="responsive-subtitle">Bar</span>
</header>

Answer 2

La funcionalidad que está viendo es correcta porque el valor predeterminado para "alineación vertical" es la línea de base. Parece que quieres vertical-align:top . Hay otras opciones Mira aquí en W3Schools .

Editar W3Schools no ha limpiado su acto y, sin embargo, parece ser una fuente de información de mala calidad (en el mejor de los casos). Ahora uso sitepoint . Desplácese hasta la parte inferior de la página principal del sitio para acceder a sus secciones de referencia.

Answer 3

Pruebe vertical-align:middle; en contenedores en línea?

EDITAR: funciona, pero todo su texto debe estar en un contenedor en línea, como este:

    <div style="height:100px; line-height:100px; background:#EEE;">
        <span style="vertical-align:middle;">test</span>
        <span style="font-size:2em; vertical-align:middle;">test</span>
    </div>

Answer 4

Sin embargo, técnicamente no puede, si tiene tamaños de texto fijos, puede usar el posicionamiento (relativo) para mover el texto más grande hacia abajo y establecer el alto de la línea para el texto más pequeño (supongo que este texto más grande está marcado como tal para que pueda usar eso como un selector de CSS)

Answer 5

Una opción es usar una tabla allí, los textos de diferentes tamaños están en sus propias celdas y usar align: middle en cada celda.

No es bonito y no funciona para todas las ocasiones, pero es simple y funciona con cualquier tamaño de texto.

Answer 6

los dos conjuntos de texto deben tener la misma altura de línea fija y el conjunto de alineación vertical

 span{
     vertical-align: bottom;
     line-height: 50px;
}