Centrar divs en float dentro de otro div

cunyao · #1 (**permalink**) 01/06/2011, 17:45

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%;
}

tredio · #2 (**permalink**) 01/06/2011, 18:39

centrados de que forma si los tienes con float:left; explica mas o menos con una imagen como quieres que queden los divs