Centrar contenido vertical div

canariozgz · #1 (**permalink**) 14/05/2008, 04:45

Hola amigos, tengo un div con un texto y quiero centrarlo verticalmente y no me hace caso el siguiente codigo:

<div style="background-color:#99FFFF; vertical-align:middle; height:50px;">

hola

</div>

y hola me sale arriba del todo y quiero que se me alinee a la mitad de la capa verticalmente, no encuentro la propiedad ni buscando por ahi, alguna idea??

muchas gracias

nedrek · #2 (**permalink**) 14/05/2008, 07:56

Código:

vertical-align:middle

Este código se refiere al elemento según el contenedor, de manera que tienes que introducir un <p> o similar, conteniendo el texto, con las siguientes propiedades:

- elemento block
- height determinado
- verical-align:middle

Así, el <p> dentro del <div> que indicaste, estará posicionado como querías!

---------------------------
Si te ayudó, pincha el Karma

Un Saludo!

florlangosta · #3 (**permalink**) 26/05/2008, 08:12

me pasa lo mismo
el texto siempre queda contra el margen superior.
este es mi codigo:

html, body {
width: 98%;
height: 100%;
margin: 0px;
}
#contendor {
height: 97%;
width: 100%;
text-align: center;
background-position: center center;
vertical-align: middle;
border: medium solid #FF0000;
}

<body>
<div id="contendor">
<div align="center" vertical-align="middle">
<p verical-align="middle">Texto de prueba</p>
</div>
</div>
</body>

alguien sabe que pasa????????

gracias

pavelinhos · #4 (**permalink**) 26/05/2008, 10:20

Prueba esto:

Código HTML:

<div style="background-color:#99FFFF; vertical-align:middle; height:50px; line-height:50px">
hola
</div>

florlangosta · #5 (**permalink**) 26/05/2008, 10:24

Cita:

Iniciado por pavelinhos

Prueba esto:

Código HTML:

<div style="background-color:#99FFFF; vertical-align:middle; height:50px; line-height:50px">
hola
</div>

no no va, sigue quedando pegado arriba.

casa · #6 (**permalink**) 23/07/2008, 18:24

Supongo que deseas centrar el texto en el medio vertical de un div...
espero que esto te ayude

debes poner esto:

display: table-cell;
vertical-align: middle;

si no pones el display no centrara ni m...

haz la prueba

saludos

Ah me olvidaba en Internet Explorer 7 no funciona el centrado

willyfc · #7 (**permalink**) 03/12/2008, 17:09

sorry escribí en este tema sin siquiera a ver visto la fecha de creación, no revivan temas antiguos ya hasta yo vine a cometer el error por no mirar la fecha