horizontally - vertical align middle css

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

Question

Quiero alinear algunos textos en la parte superior de un div. Parece que vertical-align: text-top; debería hacer el truco, pero no funciona. Las otras cosas que he hecho, como colocar los div en columnas y mostrar un borde discontinuo (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;
}

Answer 1

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

vertical-align: top;

La etiqueta de párrafo no está desactualizada. Además, el atributo de alineación vertical aplicado a un elemento de tramo puede no mostrarse como se pretende en algunos navegadores de mozilla.

Answer 2

El problema que tuve no se puede deducir de la información que he proporcionado:

• Tengo el texto encerrado en las etiquetas <p> vieja escuela.

Cambié el <p> al <span> y funciona bien.

Answer 3

Podrías aplicar position: relative; al div y luego a la position: absolute; top: 0; position: absolute; top: 0; a un párrafo o lapso dentro de él que contiene el texto.

Answer 4

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

margin-top: -50%;

Answer 5

Puede usar selectores contextuales y mover la alineación vertical allí. Esto funcionaría con la etiqueta p, entonces. Tome este fragmento a continuación como un 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 podría mantener la alineación vertical en ambas secciones para que otros elementos en línea usen esto.

Answer 6

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

vertical-align: super;

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

Sé por padding o margen va a funcionar, pero esa es la última elección que prefiero.

Answer 7

algo como

  position:relative;
  top:-5px;

solo en el elemento en línea funciona para mí. Tienes que jugar con la parte superior para que se centre verticalmente ...

Answer 8

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

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

¡Espero que esto ayude!

Answer 9

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

Resolvió mi problema