HTML
<div id="principal">
<h3>GALERÍA CSS</h3>
<div class="contenedorfoto"><a href="#"><img src="1.jpg" border="0" alt=""/><br /><span>Descripción de la imagen</span></a></div>
<div class="contenedorfoto"><a href="#"><img src="2.jpg" border="0" alt=""/><br /><span>Descripción de la imagen</span></a></div>
<div class="contenedorfoto"><a href="#"><img src="3.jpg" border="0" alt=""/><br /><span>Descripción de la imagen</span></a></div>
<div class="contenedorfoto"><a href="#"><img src="4.jpg" border="0" alt=""/><br /><span>Descripción de la imagen</span></a></div>
<div class="contenedorfoto"><a href="#"><img src="5.jpg" border="0" alt=""/><br /><span>Descripción de la imagen bastante más extensa</span></a></div>
<div class="contenedorfoto"><a href="#"><img src="6.jpg" border="0" alt=""/><br /><span>Descripción de la imagen</span></a></div>
<div class="contenedorfoto"><a href="#"><img src="7.jpg" border="0" alt=""/><br /><span>Descripción de la imagen</span></a></div>
<div class="contenedorfoto"><a href="#"><img src="8.jpg" border="0" alt=""/><br /><span>Descripción de la imagen</span></a></div>
<div class="contenedorfoto"><a href="#"><img src="9.jpg" border="0" alt=""/><br /><span>Descripción de la imagen</span></a></div>
<div class="contenedorfoto"><a href="#"><img src="10.jpg" border="0" alt=""/><br /><span>Descripción de la imagen</span></a></div>
<div class="contenedorfoto"><a href="#"><img src="11.jpg" border="0" alt=""/><br /><span>Descripción de la imagen</span></a></div>
</div>
CSS
body {
background-color: #ebeef2;
margin:20px;
}
h3 {
color:#838c98;
}
img {
border:1px solid #EEE;
}
#principal {
margin:0 auto;
position: relative;
}
.contenedorfoto {
float:left;
width:210px;
height:180px;
margin:10px;
padding:5px;
background-color:#f5f7f9;
border-right: #a5a7aa solid 1px;
border-bottom: #a5a7aa solid 1px;
text-align:center;
}
.contenedorfoto a {
text-decoration: none;
}
.contenedorfoto span {
color:#515151;
font-family: Trebuchet MS;
font-size: 9pt;
}
Deja tu comentario