Foros del Web » Creando para Internet » CSS »

Centrar contenido vertical div

Estas en el tema de Centrar contenido vertical div en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 14/05/2008, 05:45
 
Fecha de Ingreso: octubre-2006
Mensajes: 123
Antigüedad: 11 años, 1 mes
Puntos: 1
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
  #2 (permalink)  
Antiguo 14/05/2008, 08:56
 
Fecha de Ingreso: abril-2008
Ubicación: -
Mensajes: 156
Antigüedad: 9 años, 7 meses
Puntos: 5
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
Un Saludo!
  #3 (permalink)  
Antiguo 26/05/2008, 09:12
 
Fecha de Ingreso: diciembre-2003
Mensajes: 310
Antigüedad: 14 años
Puntos: 4
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
  #4 (permalink)  
Antiguo 26/05/2008, 11:20
 
Fecha de Ingreso: diciembre-2005
Mensajes: 97
Antigüedad: 12 años
Puntos: 0
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> 
__________________
_Derek_
  #5 (permalink)  
Antiguo 26/05/2008, 11:24
 
Fecha de Ingreso: diciembre-2003
Mensajes: 310
Antigüedad: 14 años
Puntos: 4
Respuesta: Centrar contenido vertical div

Cita:
Iniciado por pavelinhos Ver Mensaje
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.
  #6 (permalink)  
Antiguo 23/07/2008, 19:24
 
Fecha de Ingreso: julio-2008
Mensajes: 1
Antigüedad: 9 años, 4 meses
Puntos: 0
Exclamación 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

saludos

Ah me olvidaba en Internet Explorer 7 no funciona el centrado

Última edición por casa; 23/07/2008 a las 19:26 Razón: me olvide de algo
  #7 (permalink)  
Antiguo 03/12/2008, 17:09
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
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
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:53.