Centrar divs en un diseño fluido.
Hola a todos.
Tengo un diseño en el que se encuentran toda una serie de divs que varian su posición según las dimensiones del navegador (float: left;).
Todo bien hasta aquí, el problema viene cuando quiero que los divs se encuentren siempre centrados respecto al navegador.
Os paso una prueba del código:
<body>
<div id="contenedor">
<div id="entrada">A</div>
<div id="entrada">B</div>
<div id="entrada">C</div>
<div id="entrada">D</div>
<div id="entrada">E</div>
<div id="entrada">F</div>
<div id="entrada">G</div>
</div>
</body>
Y el CSS:
#contenedor {
margin:auto;
text-align:center;
}
#entrada {
width: 220px;
height: 300px;
background-color: #b1b1b1;
float: left;
margin: 10px;
}
Si el width del contenedor fuese fijo, no habría problema, pero necesito que ocupe la totalidad del navegador.
¡Gracias!
inaki_3
MAXer3D
Gracias por la autorespuesta MAXer3D
¡Funciona perfecto!
maxer3d
luiggi
Tendrías que leer el mensaje completo, no solo el titulo.
luiggi
para centrar un div
usa
.myclass{margin:0 auto;
}
maxer3d
MAXer3D
Me autorespondo (puede que te sirva) : http://www.anieto2k.com/2009/02/22/displayinline-block-para-todos-los-navegadores/
maxer3d
Iñaki
¿Como lo ves en IE7 ?
inaki_3
Ya encontré la solución.
display: inline-block;
inaki_3
Tampoco funciona, pero gracias de todas formas...
adriia
Si el contenedor tiene que ser el 100% del navegador dale "width:100%" y luego, si las capas con class="entrada" tienen que tener un ancho de 220px y los quieres centrados, quitale lo de "float:left" y ponle "margin: 0 auto" (donde el zero es el margen que tendrá por arriba y abajo). Así siempre estarán en el centro. :)
inaki_3
ponchi
Modifiqué el código pero sigue sin funcionar:
HTML
<body>
<div id="contenedor">
<div class="entrada">
A
</div>
<div class="entrada">
B
</div>
<div class="entrada">
C
</div>
<div class="entrada">
D
</div>
<div class="entrada">
E
</div>
<div class="entrada">
F
</div>
<div class="entrada">
G
</div>
</div>
</body>
CSS:
* {
padding: 0px;
margin: 0px:
}
#contenedor {
margin:auto;
text-align:center;
}
#contenedor .entrada {
width: 220px;
height: 300px;
background-color: #b1b1b1;
float: left;
margin-top: 10px;
margin-bottom: 10px;
margin-right: auto;
margin-left: auto;
}
Gracias!
ponchi
Para que se te centre, le tienes que dar al margin-right y al margin-left de la clase entrada el valor de auto
inaki_3
Sí, probé con ambos pero no hubo suerte.
Gracias de todas formas.
cucumelo
Has probado con "width:auto" o con "min-width"?
Por cierto, repetir un identificador no valida el código. Lo mismo te venía mejor usar tablas.