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!
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.
Iñaki
Sí, probé con ambos pero no hubo suerte.
Gracias de todas formas.
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
Iñaki
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!
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. :)
Iñaki
Tampoco funciona, pero gracias de todas formas...
Iñaki
Ya encontré la solución.
display: inline-block;
MAXer3D
Iñaki
¿Como lo ves en IE7 ?
MAXer3D
MAXer3D
Me autorespondo (puede que te sirva) : http://www.anieto2k.com/2009/02/22/displayinline-block-para-todos-los-navegadores/
luiggi
para centrar un div
usa
.myclass{margin:0 auto;
}
MAXer3D
luiggi
Tendrías que leer el mensaje completo, no solo el titulo.
Iñaki
MAXer3D
Gracias por la autorespuesta MAXer3D
¡Funciona perfecto!