vertical-align: middle

[moNTeZIon]

Código:

div style="width: 100%; height: 30px; background-image: url(Images/FondoTituloBloque.jpg); vertical-align: middle">
        &nbsp;<img src="Images/PuntoTituloBloque.gif" alt="Punto" style="vertical-align: middle;" />
        <span class="TextoNormal" style="font-weight: bold;">Enlaces de inter&eacute;s</span>
    </div>

Me muestra el contenido enganchado al nivel superior de la DIV, en vez de centrarlo verticalmente.

[moNTeZIon]

Disculpen haber incrustado tanto código. Lo dejo con este más simplificado que me ocurre lo mismo:

Código:

<div style="width: 988px; height: 40px; vertical-align: middle; border: 1px solid #000000;">
    <span class="TextoNormal" style="font-weight: bold;">Enlaces de interes</span>
</div>

No debería alinear el texto en medio del DIV (verticalmente, claro) ?? Aparece pegado al borde de arriba dejando mucho espacio por debajo..
Gracias por las opiniones.
Saludos.

[Jorolo]

Hola Avatar de moNTeZIon

vertical-align solo se aplica a los elementos en linea o celdas de tablas.
http://www.sidar.org/recur/desdi/tra...vertical-align

[SiR.CARAJ0DIDA]

esto jamas lo voy a entender, no hay algun ejemplo de vertical-align que no sea en tablas? no se supone que los elementos de linea se ajustan al contenido automaticamente y su ancho y alto no pueden ser alterados?? entonces para que sirve??

[moNTeZIon]

Hola Jorolo sin Avatar!
Tengo entendido que puedo convertir un DIV de bloque (por defecto display: block) en un "inline" (display: inline). Es entonces que si me hará caso con el vertical-align: middle? A eso te refieres?
Porqué si acaba siendo como dice SiR.CARAJODIDA, solo se puede usar con Tables, volvemos a estar en la misma coña.
A parte, he visto formas de centrar el contenido de un DIV con métodos como numeros negativos en el margin o el padding o cosas así que todavía me gustan menos.
Saludos y gracias por las opiniones.

[all-ill]

ahora mismo no te se decir exactamente si funciona o no lo siguiente, pero se debería conseguir usando display:table; y/o display:table-cell;

Una forma sería una capa contenedora con el display:table; y otra capa dentro de esta con la propiedad display:table-cell; y vertical-align:middle;

Salu2

[stock]

para centrarla verticalmente y horizontalmente, esto es suficiente:

Código:

div#Centrada{ 
   position:absolute; 
   top:50%; 
   left:50%; 
   width:500px; 
   height:300px; 
   margin-left:-250px; 
   margin-top:-150px; 
}

que esta sucediendo?? primero indicamos que el top y el lef esten en el centro, ahora, necesitamos restarle a esto la mitad de las dimenciones de la capa, en este caso el width es 500, la mitad de esto es 250, la cual se la restamos en el margen izquierdo, hacemos lo mismo para el top.

have funnnnn!!

[moNTeZIon]

Joder! con perdón.
Primero de todo gracias all-ill. Esto ya se parece más a una solución css.
Ha funcionado. Pero vamos a ver. Yo le pongo un DIV con display: table , y dentro de este (el que yo ya tenia) pero con display: table-cell
Parece como que le estemos diciendo a los DIVs que se comporten como tablas.

Me gustaría saber un motivo por el que "es mejor", "se recomienda"... esta práctica, en vez de utilizar una tabla con su celda? Porqué las tablas no están quedando obsoletas verdad? o si...

Y también, muy importante, eso no funciona en explorer. Sigue dejando el texto arriba. En cambio firefox ya lo centra. Alguna solución para Explorer?

Saludos a todos.

[moNTeZIon]

Hola stock,
Hemos respondido a la vez, jeje
Mira, esa era precisamente la forma que no me convencía.
Primero que el position: absolute no lo quiero, porqué mis DIVs (en este caso) están con position: relative
Segundo que yo quiero decirle que "se centre el contenido", y no tener que calcular las medidas cada vez que haga un cambio para que quede completamente centrado.
En fin, estas son mis inquietudes ahora mismito. Si alguien puede responderme un poco constructivamente la pregunta del anterior post, me haria un gran favor.
Saludos!

[papitorico6969]

Hola a todos, despues de quemar pestañas, llege a la solucion
1.- dentro del cuadro de dialogo de editar la regla, la primera opcion es TYPE (TIPO) y dentro de esta opcion hay un casillero que dice LINE -HEIGHT, ahi escribes el MISMO ALTO QUE PUSISTE A TU DIV y listo sea texto o imagen se centrara , es decir funcionara tu VERTICAL-ALIGN:MIDDLE
suerte a todos