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

Sé que para alinear verticalmente el texto al centro de un bloque, establece la altura de la línea a la misma altura del bloque.¿Cómo alinear verticalmente 2 tamaños diferentes de texto?

Sin embargo, si tengo una oración con una palabra en el medio, 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 base más baja que el texto más pequeño?

Fuente

2010-10-22 JD Isaacks

118

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

EDIT: funciona, pero todo el texto debe estar en un contenedor en línea, así:

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

Fuente

2010-10-22 14:54:09 MatTheCat

Y siempre pensé 'verticales -align: middle' fue solo para 'table-cell''s! –

Esto parece fallar si quiero que el segundo tramo flote correctamente. Luego se alinea en la parte superior: [jsfiddle] (http://jsfiddle.net/Lszdx2hd/) ¿Alguna idea de cómo hacer que funcione con float? – philk

¿Es necesario establecer estilos de alto y altura de línea de div principal? – lexeek

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

Fuente

2010-10-22 14:53:30 Alex

La funcionalidad que está viendo es correcto porque el valor predeterminado para "vertical-align "es línea de base. Parece que quiere vertical-align:top. Hay otras opciones Vea aquí en W3Schools.

Editar W3Schools no ha limpiado su comportamiento y, aún así, 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.

Fuente

2010-10-22 14:58:44 DwB

+10

Desde entonces, aprendí que W3Schools no es un buen sitio de referencia. Ver http://w3fools.com/ para más información. – DwB

+1 Recibe un voto favorable por llegar a la conclusión de que W3S es una basura. – aefxx

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.

Fuente

2010-10-22 14:59:00

Preferiría aceptar la derrota antes de volver a utilizar una tabla para el diseño. –

los dos conjuntos de texto debe tener la misma línea de altura fija y la vertical-align

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

Fuente

2017-09-05 08:36:57 Matoeil

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>

Fuente

2018-02-05 19:24:01

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

Respuesta

Cuestiones relacionadas