Foros del Web » Diseño web » CSS »

Centrar DIV verticalmente

Estas en el tema de Centrar DIV verticalmente en el foro de CSS en Foros del Web. Hola a todos... Tengo un div asi: <div id="main-wrapper"></div> Quiero que ese div quede centrado verticalmente en la página. ¿Qué propiedad debo usar?... Thankz in ...
  #1 (permalink)  
Antiguo 04/04/2005, 16:39
Avatar de Takitei  
Fecha de Ingreso: septiembre-2004
Ubicación: Venezuela
Mensajes: 1.231
Antigüedad: 10 años, 1 mes
Puntos: 4
Centrar DIV verticalmente

Hola a todos...

Tengo un div asi:

<div id="main-wrapper"></div>

Quiero que ese div quede centrado verticalmente en la página. ¿Qué propiedad debo usar?...

Thankz in advance!
__________________
Takitei
Ingeniarte.com
DannyHerran.com
"Dadme un punto de apoyo y moveré la tierra" - Arquímedes.
  #2 (permalink)  
Antiguo 04/04/2005, 21:34
 
Fecha de Ingreso: diciembre-2003
Mensajes: 1.583
Antigüedad: 10 años, 9 meses
Puntos: 13
Un ejemplo:

Código HTML:
<html>
<head>
<style type="text/css">
#contenedor{
    position:absolute;
    height:200px;
    width:400px;
    border:1px solid black;

    top:50%;
    margin-top:-100px; /*el negativo de la mitad de la altura del div*/
    }
</style>
</head>
<body>
<div id="contenedor">
contenido
</div>
</body>
</html> 
__________________
El conocimiento es libre: Movimiento por la Devolución
  #3 (permalink)  
Antiguo 05/04/2005, 12:05
Avatar de Takitei  
Fecha de Ingreso: septiembre-2004
Ubicación: Venezuela
Mensajes: 1.231
Antigüedad: 10 años, 1 mes
Puntos: 4
¿No hay una propiedad directa que permita hacerlo?
__________________
Takitei
Ingeniarte.com
DannyHerran.com
"Dadme un punto de apoyo y moveré la tierra" - Arquímedes.
  #4 (permalink)  
Antiguo 05/04/2005, 12:48
 
Fecha de Ingreso: febrero-2005
Ubicación: En un BLINK
Mensajes: 184
Antigüedad: 9 años, 8 meses
Puntos: 0
En CSS, no.
Por cierto, al código anterior le falta
Código:
html,body {height:100%}
o me parece?
  #5 (permalink)  
Antiguo 05/04/2005, 16:41
Avatar de Takitei  
Fecha de Ingreso: septiembre-2004
Ubicación: Venezuela
Mensajes: 1.231
Antigüedad: 10 años, 1 mes
Puntos: 4
¿Y si hacemos un div que ocupe el 100% de la ventana verticalmente... (algo asi como height:100%) y luego el contenido (el cual es una imagen) lo pongo centrado usando "background:url(images/logo.gif) no-repeat center center" ???

El problema es que height:100% no me funciona!!!
__________________
Takitei
Ingeniarte.com
DannyHerran.com
"Dadme un punto de apoyo y moveré la tierra" - Arquímedes.
  #6 (permalink)  
Antiguo 05/04/2005, 21:27
 
Fecha de Ingreso: febrero-2005
Ubicación: En un BLINK
Mensajes: 184
Antigüedad: 9 años, 8 meses
Puntos: 0
Lo que decis de usar una imagen de fondo es totalmente posible, pero en principio vos querías centrar un DIV.
Por cierto, sería bueno que incluyeras una página tuya mostrando que height:100% no te funciona.
  #7 (permalink)  
Antiguo 06/04/2005, 17:02
Avatar de Takitei  
Fecha de Ingreso: septiembre-2004
Ubicación: Venezuela
Mensajes: 1.231
Antigüedad: 10 años, 1 mes
Puntos: 4
Bueno... centrar el DIV o centrar el contenido del DIV me da igual. Lo que me interesa es que la imagen que esta dentro del DIV quede totalmente centrada en la pantalla, sin importar la resolución.

El code es:

Código HTML:
<body>
<div id="main-wrapper">&nbsp;</div>
</body> 
Luego el CSS es asi:

Código:
#main-wrapper{
	margin:0px auto;
	background:url(images/logo.gif) no-repeat center center;
	height:100%;
	width:400px;
}
Aunque... hice esto y me funcionó:

Código:
body{
	background:url(images/logo.gif) no-repeat center center;
}
__________________
Takitei
Ingeniarte.com
DannyHerran.com
"Dadme un punto de apoyo y moveré la tierra" - Arquímedes.
  #8 (permalink)  
Antiguo 06/04/2005, 20:10
Avatar de jesusbet
(Desactivado)
 
Fecha de Ingreso: mayo-2004
Ubicación: Monterrey, MX
Mensajes: 2.667
Antigüedad: 10 años, 5 meses
Puntos: 2
y no te funca magin: auto???

lo que nosotros usamos es margin: auto para centrar bloques, pero nunca se nos ha presentado la necesidad de centrar divs verticalmente, aunque poniendo un padding-bottom: Npx; padding-top: Npx; también puede funcionar, donde N es el mismo número, padding también puede sustituirse por margin.

saludos
  #9 (permalink)  
Antiguo 06/04/2005, 21:13
 
Fecha de Ingreso: febrero-2005
Ubicación: En un BLINK
Mensajes: 184
Antigüedad: 9 años, 8 meses
Puntos: 0
Habrá agregado el DTD?
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  #10 (permalink)  
Antiguo 06/04/2005, 21:15
Avatar de jesusbet
(Desactivado)
 
Fecha de Ingreso: mayo-2004
Ubicación: Monterrey, MX
Mensajes: 2.667
Antigüedad: 10 años, 5 meses
Puntos: 2
el dtd no tiene nada que ver en como el navegador interprete tu documento...

saludos
  #11 (permalink)  
Antiguo 06/04/2005, 23:43
 
Fecha de Ingreso: febrero-2005
Ubicación: En un BLINK
Mensajes: 184
Antigüedad: 9 años, 8 meses
Puntos: 0
Sacrilegio! El DTD hace la diferencia, sobre todo con navegadores actuales.
¿Sabías que IE6/Win no acepta margin:auto para centrar a menos que incluyas el DTD?
  #12 (permalink)  
Antiguo 07/04/2005, 07:59
Avatar de jesusbet
(Desactivado)
 
Fecha de Ingreso: mayo-2004
Ubicación: Monterrey, MX
Mensajes: 2.667
Antigüedad: 10 años, 5 meses
Puntos: 2
no, no sabía, grax por la info... en cuanto al div, echas un grito si te funciona o no...

saludos
  #13 (permalink)  
Antiguo 07/04/2005, 16:10
Avatar de Takitei  
Fecha de Ingreso: septiembre-2004
Ubicación: Venezuela
Mensajes: 1.231
Antigüedad: 10 años, 1 mes
Puntos: 4
No el div no funciona centrado verticalmente. Any way... ya resolví usando el body y centrando la imagen.

Por cierto, si estoy usando el DTD para XHTML Strict.
__________________
Takitei
Ingeniarte.com
DannyHerran.com
"Dadme un punto de apoyo y moveré la tierra" - Arquímedes.
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 02:43.
SEO by vBSEO 3.3.2