Foros del Web » Creando para Internet » CSS »

centrar un div horizontal y veritcalmente [SOLUCIONADO]

Estas en el tema de centrar un div horizontal y veritcalmente [SOLUCIONADO] en el foro de CSS en Foros del Web. estuve buscando y la verdad que ninguna de las soluciones q ofrecen me sirve :x a daphyre dice que se hace con margin:auto 0; (o ...
  #1 (permalink)  
Antiguo 27/11/2008, 04:12
Avatar de sanchy  
Fecha de Ingreso: octubre-2008
Mensajes: 389
Antigüedad: 9 años, 1 mes
Puntos: 9
centrar un div horizontal y veritcalmente [SOLUCIONADO]

estuve buscando y la verdad que ninguna de las soluciones q ofrecen me sirve :x

a daphyre dice que se hace con margin:auto 0; (o era 0 auto? de todas formas probe las 2) otros dicen que margin:25% auto; text-align:center;

ninguna me funciona correctamente, la de auto 0 no hace absolutamente nada

y la de 25% auto hace que la imagen comience a los 25%, no que su punto medio este a los 25%
por lo cual se me ocurrio que poniendo 17% deberia centrarse, lo cual CASI (no es exacto pero habia quedado conforme) hace pero....

al poner 17%, en resoluciones chicas (1024*768), me genera un scroll vertical que no es necesario ya que es la unica imagen en la pantalla y es bastante mas chica que cualquier resolucion (511*340)

esta es la url: www.modthis.org

y el codigo es bastante simple

Código:
body {
background:url(backindex2.png) no-repeat fixed center bottom; 
background-color:#000;
}
#container {
margin:17% auto;
text-align:center;
} 
Código:
<body>

<div id="container">
<img src="welcomesss.png" width="511" height="340" alt="Welcome" />

</div>
</body> 
se que esto se pregunto 10mil veces, la verdad me da cosa preguntar denuevo. pero nada de lo que hago centra de verdad el div :/

kpas que me esta faltando algo y no me doy cuenta, perdonen y gracias




SOLUCION: (no funciona en IE6)

cambio el titulo y pongo el codigo por las dudas si alguien busca lo mismo que yo:

Código:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MODthis!org - SOON</title>

<style type="text/css">
<!--
body {
background-color:#000;
background:url(Images/backindex.png) no-repeat fixed center bottom; background-color:#000;
}
html, body { 
margin:0; 
padding:0;
height: 100%;
width: 100%;
text-align: center;
}
#frame {
margin: auto;
display: table;
height: 100%;
}
#container {
display: table-cell;
vertical-align: middle;
}

</style>
</head>
<body>

<div id="frame">
<div id="container">
<img src="Images/welcomesss.png" width="511" height="340" alt="Welcome" />
</div>
</div>
</body>
</html>

Última edición por sanchy; 27/11/2008 a las 05:59
  #2 (permalink)  
Antiguo 27/11/2008, 04:17
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: posicionar un div en centro centro de la pantalla ;P

Cita:
Iniciado por sanchy Ver Mensaje
estuve buscando y la verdad que ninguna de las soluciones q ofrecen me sirve :x
El asunto es que si tu contenedor no tiene un tamaño de ancho no se puede centrar, porque está ocupando el 100% de la pantalla. Prueba a ponerle un borde para estar seguro:

border: solid 1px #f00;
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 27/11/2008, 04:21
Avatar de sanchy  
Fecha de Ingreso: octubre-2008
Mensajes: 389
Antigüedad: 9 años, 1 mes
Puntos: 9
Respuesta: posicionar un div en centro centro de la pantalla ;P

acabo de probar y si efectivamente tiene el ancho de la pantalla, pero el ancho no es el problema ya que a lo ancho la imagen se esta centrando con text-align:center

el tema es el alto :/ podria hacer que el div tambien ocupe toda el alto y usar v-align?
  #4 (permalink)  
Antiguo 27/11/2008, 04:23
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: posicionar un div en centro centro de la pantalla ;P

Cita:
Iniciado por sanchy Ver Mensaje
el tema es el alto :/ podria hacer que el div tambien ocupe toda el alto y usar v-align?
Debías haber dicho que hablabas de centrado vertical.

Si, eso podrías hacerlo con display-table, pero en IE6 no te funcionará.

Especifica concretamente cómo es lo que tienes y lo que quieres hacer y te diremos cómo hacerlo.
__________________
Visita mi nueva web idplus.org
  #5 (permalink)  
Antiguo 27/11/2008, 04:24
Avatar de sanchy  
Fecha de Ingreso: octubre-2008
Mensajes: 389
Antigüedad: 9 años, 1 mes
Puntos: 9
Respuesta: posicionar un div en centro centro de la pantalla ;P

si le asigno un ancho al div, 511px (el mismo q la imagen) tambien se centra horizontalmente... ahora si que me perdi ^__^


Cita:
Iniciado por Mikmoro Ver Mensaje
Debías haber dicho que hablabas de centrado vertical.

Si, eso podrías hacerlo con display-table, pero en IE6 no te funcionará.

Especifica concretamente cómo es lo que tienes y lo que quieres hacer y te diremos cómo hacerlo.
disculpa, con "centro centro" que quice referir a centrarla horizontal y verticalmente. hablo muy raro yo y escribo como hablo eso es lo peor :P
  #6 (permalink)  
Antiguo 27/11/2008, 04:29
Avatar de sanchy  
Fecha de Ingreso: octubre-2008
Mensajes: 389
Antigüedad: 9 años, 1 mes
Puntos: 9
Respuesta: posicionar un div horizontal y veritcalmente en la pantalla ;P

ahi le arregle el titulo, perdon por la confusion =)
  #7 (permalink)  
Antiguo 27/11/2008, 05:17
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: centrar un div horizontal y veritcalmente en la pantalla ;P

Mira: en esta página, en la columna izquierda tienes 3 ejemplos de centrado vertical. A ver si alguno te sirve de orientación.
__________________
Visita mi nueva web idplus.org
  #8 (permalink)  
Antiguo 27/11/2008, 05:57
Avatar de sanchy  
Fecha de Ingreso: octubre-2008
Mensajes: 389
Antigüedad: 9 años, 1 mes
Puntos: 9
Respuesta: centrar un div horizontal y veritcalmente en la pantalla ;P

gracias! :D el 1 fue el que me sirvio aunque lo tuve que modificar un poco

todavia tengo 1 duda,

en el codigo nuevo (ver en el primer post) tengo 2 reglas css para el body

una se llama "body" y la otra "html, body"

mi duda es la siguiente, si yo uno las 2 en "body" o borro 'html' ya no funciona. cual es la diferencia entre estas 2 reglas y por que sin el 'html' no funciona igual?

gracias!
  #9 (permalink)  
Antiguo 27/11/2008, 10:26
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: centrar un div horizontal y veritcalmente [SOLUCIONADO]

HTML es el elemento padre, el primero de todos; todo está contenido en HTML. Body es su primer hijo. Algunas cosas hay que ponérselas al elemento raiz para que funcionen, como un alto global para toda la página en porcentaje (height: 100%), porque si el elemento padre no tiene tamaño, el porcentaje de los demás no tiene base sobre la que aplicar el porcentaje y ni funciona, por eso algunas cosas, si quitas html no funcionan.
__________________
Visita mi nueva web idplus.org
  #10 (permalink)  
Antiguo 27/11/2008, 11:24
Avatar de sanchy  
Fecha de Ingreso: octubre-2008
Mensajes: 389
Antigüedad: 9 años, 1 mes
Puntos: 9
Respuesta: centrar un div horizontal y veritcalmente [SOLUCIONADO]

entendido ;) muchas gracias
  #11 (permalink)  
Antiguo 27/11/2008, 11:29
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: centrar un div horizontal y veritcalmente [SOLUCIONADO]

De nada, es un placer.
Gracias por tu comentario en el karma.
__________________
Visita mi nueva web idplus.org
  #12 (permalink)  
Antiguo 27/10/2012, 11:02
 
Fecha de Ingreso: junio-2012
Ubicación: En el Mundo
Mensajes: 679
Antigüedad: 5 años, 6 meses
Puntos: 9
Respuesta: centrar un div horizontal y veritcalmente [SOLUCIONADO]

muy bueno lo andaba buscando
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 16:50.