cunyao
01 Jun 2011, 07:07 PM
Hello,
I have several divs within a div that I want to center but I can not, I did many tests and internet search. I want all divs inside the div "cartelleria" be likw now but centered. I mean that the left margin of the first div and the right margin of the last to have the same size on the div "cartelleria". I hope you understand. Here is the code:
HTML:
<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:
#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%;
}
I have several divs within a div that I want to center but I can not, I did many tests and internet search. I want all divs inside the div "cartelleria" be likw now but centered. I mean that the left margin of the first div and the right margin of the last to have the same size on the div "cartelleria". I hope you understand. Here is the code:
HTML:
<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:
#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%;
}