Foros del Web » Creando para Internet » CSS »

Centrar div vertical y horizontalmente dentro de otro

Estas en el tema de Centrar div vertical y horizontalmente dentro de otro en el foro de CSS en Foros del Web. Hola buenas, Me surjio un problema que tengo ya casi resuelto, le falta la guinda, y es poder centrar el un <div> dentro de otro ...
  #1 (permalink)  
Antiguo 24/07/2011, 09:21
Avatar de aganglada  
Fecha de Ingreso: julio-2011
Ubicación: Málaga
Mensajes: 14
Antigüedad: 5 años, 5 meses
Puntos: 3
Centrar div vertical y horizontalmente dentro de otro

Hola buenas, Me surjio un problema que tengo ya casi resuelto, le falta la guinda, y es poder centrar el un <div> dentro de otro verticalmente, al poner margin:auto; lo centra horizontalmente pero no así verticalmente.

aquí os dejo el código, a ver si le encontráis solución:

HTML--->
Código HTML:
<div class="cag">
<div class="cag1">
<div class="cag2">
</div>
</div>
</div> 
CSS--->
Código HTML:
.cag{
	height:180px;
	width:180px;
	background:transparent;
	position:relative;
	display:inline-block;
}

.cag1{
	height:125px;
	width:125px;
	background:#cccccc;
	display:block;
	position:relative;
	margin:auto;
	-webkit-transition:400ms ease-in-out;
	-moz-transition:400ms ease-in-out;
	-o-transition:400ms ease-in-out;
	-ms-transition:400ms ease-in-out;	
	transition:400ms ease-in-out;
	-moz-border-radius:63px;
	-webkit-border-radius:63px;
	-o-border-radius:63px;
	border-radius:63px;


	
}

.cag1:hover{
	padding:25px;
	background:#cccccc;
	-moz-border-radius:90px;
	-webkit-border-radius:90px;
	-o-border-radius:90px;
	border-radius:90px;

}

.cag2{
	height:125px;
	width:125px;
	background:url(images/cag.png) no-repeat center;
	
	
}
Aqui el enlace para verlo:
http://aganglada.web44.net

La idea es que el circulo crezca por todas sus partes igualmente sin que se mueva el de dentro. Muchas Gracias de Antemano!
  #2 (permalink)  
Antiguo 24/07/2011, 10:12
Avatar de sephirot47  
Fecha de Ingreso: marzo-2011
Ubicación: BCN
Mensajes: 54
Antigüedad: 5 años, 10 meses
Puntos: 9
Respuesta: Centrar div vertical y horizontalmente dentro de otro

Prueba con:

vertical-align:middle;

(Si no recuerdo mal...)
__________________
Todo lo que tiene un inicio tiene un final inevitable...

¡ No olvides darme karma si te fui útil ^^ !
  #3 (permalink)  
Antiguo 24/07/2011, 10:33
Avatar de aganglada  
Fecha de Ingreso: julio-2011
Ubicación: Málaga
Mensajes: 14
Antigüedad: 5 años, 5 meses
Puntos: 3
Respuesta: Centrar div vertical y horizontalmente dentro de otro

Cita:
Iniciado por sephirot47 Ver Mensaje
Prueba con:

vertical-align:middle;

(Si no recuerdo mal...)
Lo probé pero no hace nada :S
  #4 (permalink)  
Antiguo 24/07/2011, 10:40
Avatar de sephirot47  
Fecha de Ingreso: marzo-2011
Ubicación: BCN
Mensajes: 54
Antigüedad: 5 años, 10 meses
Puntos: 9
Respuesta: Centrar div vertical y horizontalmente dentro de otro

Aunque me he pasado por tu web y creo que el problema no es el align ni los margins...yo optaria por poner lo de dentro en otra div independiente...
Es decir, mismo procedimiento pero sin que la transformacion de las divs afecte a lo de dentro:
<div class="cag">
<div class="cag1">
</div>
</div>
<div class="cag2">
</div>

Con position:absolute...es un poco chapuzas pero puede funcionar xDD
Prueba con eso, y si no ya lo haria con js...
__________________
Todo lo que tiene un inicio tiene un final inevitable...

¡ No olvides darme karma si te fui útil ^^ !
  #5 (permalink)  
Antiguo 24/07/2011, 10:58
Avatar de Batan  
Fecha de Ingreso: septiembre-2010
Ubicación: Madrid
Mensajes: 408
Antigüedad: 6 años, 3 meses
Puntos: 63
Respuesta: Centrar div vertical y horizontalmente dentro de otro

Buenas.
Poner un padding puede valerte tambien, y si tienes puesto una altura fija al DIV contenedor, pues tendrias que reducir la altura de los DIV relativamente con la del padding(no se si me explique).

Saludos.
  #6 (permalink)  
Antiguo 24/07/2011, 11:03
Avatar de aganglada  
Fecha de Ingreso: julio-2011
Ubicación: Málaga
Mensajes: 14
Antigüedad: 5 años, 5 meses
Puntos: 3
Respuesta: Centrar div vertical y horizontalmente dentro de otro

Cita:
Iniciado por sephirot47 Ver Mensaje
Aunque me he pasado por tu web y creo que el problema no es el align ni los margins...yo optaria por poner lo de dentro en otra div independiente...
Es decir, mismo procedimiento pero sin que la transformacion de las divs afecte a lo de dentro:
<div class="cag">
<div class="cag1">
</div>
</div>
<div class="cag2">
</div>

Con position:absolute...es un poco chapuzas pero puede funcionar xDD
Prueba con eso, y si no ya lo haria con js...
Aunque pongas el div "cag2" fuera el otro sigue creciendo igualmente...
  #7 (permalink)  
Antiguo 24/07/2011, 15:55
Avatar de Pixeltwo  
Fecha de Ingreso: mayo-2011
Mensajes: 32
Antigüedad: 5 años, 7 meses
Puntos: 1
Respuesta: Centrar div vertical y horizontalmente dentro de otro

Esto es mas que simple..

dentro de ese DIV coge y ponle un width y margin:auto;


por ejemplo, cuando yo quiero centrar un elemento al centro, uso margin-left/right:auto. Ojo, siempre tiene que tener un width definido sino no funcionará.

entonces en tu caso quedaria algo asi:



Código HTML:
Ver original
  1. <div id="contenedor" style="width:800px; background-color:gold; margin-left:auto; margin-right:auto;"><!--el div que contiene al div que quieres-->
  2.  <div id="elcontenido" style="margin:auto; width:700px; background-color:white;"></div>
  3. </div>



Espero me hayas entendido ! :) puedes modificar las propiedades a tus necesidades
  #8 (permalink)  
Antiguo 24/07/2011, 16:44
Avatar de aganglada  
Fecha de Ingreso: julio-2011
Ubicación: Málaga
Mensajes: 14
Antigüedad: 5 años, 5 meses
Puntos: 3
Respuesta: Centrar div vertical y horizontalmente dentro de otro

Cita:
Iniciado por Pixeltwo Ver Mensaje
Esto es mas que simple..

dentro de ese DIV coge y ponle un width y margin:auto;


por ejemplo, cuando yo quiero centrar un elemento al centro, uso margin-left/right:auto. Ojo, siempre tiene que tener un width definido sino no funcionará.

entonces en tu caso quedaria algo asi:



Código HTML:
Ver original
  1. <div id="contenedor" style="width:800px; background-color:gold; margin-left:auto; margin-right:auto;"><!--el div que contiene al div que quieres-->
  2.  <div id="elcontenido" style="margin:auto; width:700px; background-color:white;"></div>
  3. </div>



Espero me hayas entendido ! :) puedes modificar las propiedades a tus necesidades
No hace nada :S, creo que el problema esta en los z-index pero no doy con la tecla de como renderizarlo.
  #9 (permalink)  
Antiguo 24/07/2011, 16:58
Avatar de Pixeltwo  
Fecha de Ingreso: mayo-2011
Mensajes: 32
Antigüedad: 5 años, 7 meses
Puntos: 1
Respuesta: Centrar div vertical y horizontalmente dentro de otro

No porque los Z-index la unica funcion que cumplen es superponer capas, poniendo por delante la de mayor indice...

Aqui lo que quieres es centrar verticalmente, he estado intentandolo por mi cuenta y si, no funcionó ( tampoco habia leido a fondo todo el topic ).

A mi de buenas a primeras, lo unico que se me puede llegar a ocurrir es una solucion un tanto simple, que consiste en que pongas el DIV este ( que contiene ese circulo) dentro de un div con width y height al 100%; y le pongas un margin:50% (al div de dentro).

La otra que te codees con el margin-top en base a tus necesidades, no veo otra manera posible de hacer eso..


  #10 (permalink)  
Antiguo 26/07/2011, 03:02
Avatar de andresdzphp
Colaborador
 
Fecha de Ingreso: julio-2011
Ubicación: $this->Colombia;
Mensajes: 2.749
Antigüedad: 5 años, 5 meses
Puntos: 793
Respuesta: Centrar div vertical y horizontalmente dentro de otro

A mi me gusta aprender con ejemplos y aquí te dejo uno de como centrar verticalmente un div.

Código CSS:
Ver original
  1. <html>
  2. <head>
  3. <title>Centrado Vertical con CSS</title>
  4.  
  5. <style type="text/css">
  6.  
  7. .contenedor {
  8.     top: 0;
  9.     left: 0;
  10.     width: 100%;
  11.     height: 100%;}
  12.    
  13. .contenedor[class] {
  14.     position: fixed;
  15.     display: table;}
  16.    
  17. .centrado {
  18.     position: absolute;
  19.     top: 50%;}
  20.  
  21. .centrado[class] {
  22.     display: table-cell;
  23.     vertical-align: middle;
  24.     text-align: center;
  25.     position: static;
  26.     }
  27.    
  28. .contenido {
  29.     width: 200px;
  30.     height: 200px;
  31.     border: 1px solid #000;
  32.     margin: 0 auto;
  33.     position: relative;
  34.     top: -50%;
  35.     }
  36.    
  37. </style>
  38.  
  39. </head>
  40. <body>
  41. <div class="contenedor">
  42.     <div class="centrado">
  43.         <div class="contenido">
  44.         <p>Centrado vertical y horizontal</p>
  45.  
  46.         </div>
  47.     </div>
  48. </div>
  49. </body>
  50.  
  51. </html>
__________________
Si sabemos como leer e interpretar el manual será mucho más fácil aprender PHP. En lugar de confiar en ejemplos o copiar y pegar - PHP
  #11 (permalink)  
Antiguo 27/07/2011, 10:19
Avatar de aganglada  
Fecha de Ingreso: julio-2011
Ubicación: Málaga
Mensajes: 14
Antigüedad: 5 años, 5 meses
Puntos: 3
Respuesta: Centrar div vertical y horizontalmente dentro de otro

Cita:
Iniciado por andresdzphp Ver Mensaje
A mi me gusta aprender con ejemplos y aquí te dejo uno de como centrar verticalmente un div.

Código CSS:
Ver original
  1. <html>
  2. <head>
  3. <title>Centrado Vertical con CSS</title>
  4.  
  5. <style type="text/css">
  6.  
  7. .contenedor {
  8.     top: 0;
  9.     left: 0;
  10.     width: 100%;
  11.     height: 100%;}
  12.    
  13. .contenedor[class] {
  14.     position: fixed;
  15.     display: table;}
  16.    
  17. .centrado {
  18.     position: absolute;
  19.     top: 50%;}
  20.  
  21. .centrado[class] {
  22.     display: table-cell;
  23.     vertical-align: middle;
  24.     text-align: center;
  25.     position: static;
  26.     }
  27.    
  28. .contenido {
  29.     width: 200px;
  30.     height: 200px;
  31.     border: 1px solid #000;
  32.     margin: 0 auto;
  33.     position: relative;
  34.     top: -50%;
  35.     }
  36.    
  37. </style>
  38.  
  39. </head>
  40. <body>
  41. <div class="contenedor">
  42.     <div class="centrado">
  43.         <div class="contenido">
  44.         <p>Centrado vertical y horizontal</p>
  45.  
  46.         </div>
  47.     </div>
  48. </div>
  49. </body>
  50.  
  51. </html>
Muchas Gracias! :)

Etiquetas: horizontalmente, vertical, fondo
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 03:46.