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

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

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.

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!

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

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.

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.

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.

position:absolute;
top:0px; 
margin:5px;

Resolvió mi problema.

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

margin-top: -50%;

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.