¿Por qué es vertical-align: text-top; que no trabajan en CSS

Question

Quiero alinear un texto a la parte superior de un div. Parece que vertical-align: text-top; debe hacer el truco, pero no funciona. Las otras cosas que he hecho, como poner los divs en columnas y mostrando un borde discontinuo (por lo que se pueden ver en la parte superior del div es) todo muy bien el trabajo.

#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 para elementos en línea solamente. No tendrá ningún efecto sobre elementos de bloque, como un div. También el texto de arriba sólo se mueve el texto a la parte superior del tamaño de fuente actual. Si desea alinear verticalmente un elemento en línea a la parte superior sólo tiene que utilizar esto.

vertical-align: top;

La etiqueta de párrafo no está actualizado. Además, el atributo vertical-align aplica a un elemento span no se muestren como se pretende en algunos navegadores Mozilla.

Answer 2

vertical-align solamente se supone que funciona en los elementos que se representan como inline. <span> se representa como línea por defecto, pero no todos los elementos son. El elemento de bloque párrafo, <p>, se representa como un bloque por defecto. Tabla rinda tipos (por ejemplo table-cell) se permitirá utilizar vertical-align también.

Algunos navegadores pueden permitir el uso de la propiedad CSS vertical-align en artículos tales como el bloque párrafo, pero no se supone que. Texto denotado como un párrafo se debe llenar de contenido el lenguaje escrito o el margen de beneficio es incorrecta y debe utilizar uno de una serie de otras opciones en su lugar.

Espero que esto ayude!

Answer 3

algo así como

  position:relative;
  top:-5px;

sólo en el elemento en línea en sí funciona para mí. Tener que jugar con la parte superior conseguirlo centra verticalmente ...

Answer 4

Se podría aplicar a la position: relative; div y luego position: absolute; top: 0; a un párrafo o lapso en el interior de la misma que contiene el texto.

Answer 5

Puede utilizar selectores contextuales y mover la vertical-align allí. Esto funcionaría con la etiqueta p, entonces. Tome este fragmento a continuación como ejemplo. Cualquier etiqueta p dentro de su clase respetarán el control vertical-align:

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

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

También puede mantener la vertical-align en ambas secciones, de manera que otros elementos en línea usarían esto.

Answer 6

El todo por encima de no funcionar para mí, sólo me han comprobado 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>

Lo sé por el relleno o el margen va a funcionar, pero esa es la última elección que prefiero.

Answer 7

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

resolvió mi problema.

Answer 8

Puede utilizar margin-top: -50% para mover el texto todo el camino hasta la cima de la div

.

margin-top: -50%;

Answer 9

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

• que tenía el texto entre las etiquetas <p> de la vieja escuela.

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