¿Por qué vertical-align: text-top; no funciona en CSS

78

Quiero alinear algún texto con la parte superior de un div. Parece que vertical-align: text-top;debería funcionar, pero no funciona. Las otras cosas que he hecho, como poner los divs en columnas y mostrar un borde punteado (para que pueda ver dónde está la parte superior del div) funcionan bien.

#header_p { 
    font-family: Arial;
    font-size: 32px;
    font-weight: bold;
}
#header_selecttxt {
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
    vertical-align: text-top;
}
#header_div_left { 
    float: left; 
    width: 50%;
    border: dashed;
    vertical-align: top;
}
#header_div_right { 
    margin-left: 50%;
    width: 50%;
    border: dashed;
}
Ankur
fuente

Respuestas:

116

El atributo de alineación vertical es solo para elementos en línea. No tendrá ningún efecto en los elementos de nivel de bloque, como un div. Además, text-top solo mueve el texto a la parte superior del tamaño de fuente actual. Si desea alinear verticalmente un elemento en línea en la parte superior, simplemente use esto.

vertical-align: top;

La etiqueta de párrafo no está desactualizada. Además, es posible que el atributo de alineación vertical aplicado a un elemento de extensión no se muestre como se esperaba en algunos navegadores de Mozilla.


fuente
2
No funcionó para mí. El texto siempre se alinea verticalmente en el centro :(
AlikElzin-kilaka
22

vertical-alignsolo se supone que funciona en elementos que se representan como inline. <span>se representa como en línea de forma predeterminada, pero no todos los elementos lo son. El elemento de bloque de párrafo <p>, se representa como un bloque por defecto. Los tipos de renderizado de tabla (por ejemplo table-cell) también le permitirán usar alineación vertical.

Algunos navegadores pueden permitirle usar la vertical-alignpropiedad CSS en elementos como el bloque de párrafo, pero se supone que no deben hacerlo. El texto indicado como un párrafo debe llenarse con contenido en lenguaje escrito o el marcado es incorrecto y debe usar una de varias otras opciones en su lugar.

¡Espero que esto ayude!

mechler
fuente
12

algo como

  position:relative;
  top:-5px;

solo en el elemento en línea funciona para mí. Hay que jugar con la tapa para que quede centrada verticalmente ...

Todd
fuente
4

Puede aplicar position: relative;al div y luego position: absolute; top: 0;a un párrafo o tramo dentro de él que contiene el texto.

Evan Meagher
fuente
1

Puede usar selectores contextuales y mover la alineación vertical allí. Entonces, esto funcionaría con la etiqueta p. Tome este fragmento a continuación como ejemplo. Cualquier etiqueta p dentro de su clase respetará el control de alineación vertical:

#header_selecttxt {
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
}

#header_selecttxt p {
    vertical-align: text-top;
}

También puede mantener la alineación vertical en ambas secciones para que otros elementos en línea usen esto.

RockAndRollBot
fuente
1

Todo lo anterior no funciona para mí, acabo de verificar esto y su trabajo:

alineación vertical: super;

 <div id="lbk_mng_rdooption" style="float: left;">
     <span class="bold" style="vertical-align: super;">View:</span>
 </div>

Sé que el relleno o el margen funcionarán, pero esa es la última opción que prefiero.

Ajay2707
fuente
No sé por qué, pero lo <span>hago mejor que <p>o<h6>
yu yang Jian
0
position:absolute;
top:0px; 
margin:5px;

Resolvió mi problema.

CodeNoob
fuente
-1

Puede usar margin-top: -50% para mover el texto hasta la parte superior del div.

margin-top: -50%;
Sr. Doomsbuster
fuente
-3

El problema que tuve no se puede descifrar a partir de la información que he proporcionado:

  • Tenía el texto encerrado en <p>etiquetas de la vieja escuela .

He cambiado la <p>a <span>y trabaja muy bien.

Ankur
fuente
14
<p> Ciertamente no es de la vieja escuela, Dios no permita que un sitio web esté compuesto exclusivamente por <div> y <span>.
Ryan Florence
Tengo una experiencia web limitada, pero cada vez que intento <div> sin procesar y solo uso tablas para mostrar información, me resulta bastante difícil MANTENER todo dentro del 'contenedor' <div>, por ejemplo. Rara vez consigues eso con tablas, si hay algo en una celda, normalmente no sale
Coops
1
La diferencia crucial se debe al uso de una etiqueta de bloque<p> frente a una etiqueta en línea <span>.
Lawrence Dol
1
Configure la pantalla como bloque en línea, entonces solo su alineación vertical funcionará en su caso.
SƲmmēr Aƥ