Hola,
Tengo varios divs dentro de un div que quiero centrar pero no lo consigo, ya hice muchas pruebas y rebusque por internet. El html y css más sencillo de lo que necessito es esto. Quiero que todos los divs dentro del div "cartelleria" esten igual como ahora pero centrados, espero que se entienda. Ahí va el código:
HTML:
Código:
<html>
<head>
<link type="text/css" rel="stylesheet" href="prova.css">
<head>
<body>
<div id="cartelleria" class="clearfix" >
<div class="cartell" id="ed2001"><a href="edicio2001.html">2001</br><img src="imatges/cartell2001.jpg"></a></div>
<div class="cartell" id="ed2002"><a href="edicio2002.html">2002</br><img src="imatges/cartell2002.jpg"></a></div>
<div class="cartell" id="ed2003"><a href="edicio2003.html">2003</br><img src="imatges/cartell2003.jpg"></a></div>
<div class="cartell" id="ed2004"><a href="edicio2004.html">2004</br><img src="imatges/cartell2004.jpg"></a></div>
<div class="cartell" id="ed2005"><a href="edicio2005.html">2005</br><img src="imatges/cartell2005.jpg"></a></div>
<div class="cartell" id="ed2006"><a href="edicio2006.html">2006</br><img src="imatges/cartell2006.jpg"></a></div>
<div class="cartell" id="ed2007"><a href="edicio2007.html">2007</br><img src="imatges/cartell2007.jpg"></a></div>
<div class="cartell" id="ed2008"><a href="edicio2008.html">2008</br><img src="imatges/cartell2008.jpg"></a></div>
<div class="cartell" id="ed2009"><a href="edicio2009.html">2009</br><img src="imatges/cartell2009.jpg"></a></div>
<div class="cartell" id="ed2010"><a href="edicio2010.html">2010</br><img src="imatges/cartell2010.jpg"></a></div>
<div class="cartell" id="ed2011"><a href="descarrega/programa.pdf">2011</br><img src="imatges/cartell2011.jpg"></a></div>
</div>
</body>
</html>
CSS:
Código:
#cartelleria {
background-color: #2acfe2;
padding-top: .5em;
padding-bottom: 0.5em;
text-align: center;
width: 800px;
margin: 0 auto;
}
.cartell {
text-align: center;
font-size: small;
float: left;
margin-right: 2em;
}
.cartell a {
border: none;
color: white;
text-decoration: none;
font-weight: bold;
}
.cartell img {
border: 1px solid #41b0a1;
}
.cartell img:hover {
border: 1px solid white;
}
/**
* Markup free clearing.
*
* @see http://perishablepress.com/press/2009/12/06/new-clearfix-hack
*/
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* IE6 */
* html .clearfix {
height: 1%;
}
/* IE7 */
*:first-child + html .clearfix {
min-height: 1%;
}