Foros del Web - Centrar contenido vertical div

Foros del Web (http://www.forosdelweb.com/)

- CSS (http://www.forosdelweb.com/f53/)

- - Centrar contenido vertical div (http://www.forosdelweb.com/f53/centrar-contenido-vertical-div-586290/)

canariozgz

14/05/2008 04:45

Centrar contenido vertical div

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

14/05/2008 07:56

Re: Centrar contenido vertical div

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 :si:
Un Saludo!

florlangosta

26/05/2008 08:12

Respuesta: Centrar contenido vertical div

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

26/05/2008 10:20

Respuesta: Centrar contenido vertical div

Prueba esto:

Código HTML:

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

hola
 </div>

florlangosta

26/05/2008 10:24

Respuesta: Centrar contenido vertical div

Cita:

Iniciado por pavelinhos (Mensaje 2420000)

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	23/07/2008 18:24

Respuesta: Centrar contenido vertical div

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:borracho:

saludos

Ah me olvidaba en Internet Explorer 7 no funciona el centrado

willyfc

03/12/2008 17:09

Respuesta: Centrar contenido vertical div

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

La zona horaria es GMT -6. Ahora son las 09:11.