He aquí un truco que permite poner un título a las fotos de una página web. Se trata de una solución con CSS.
Para conseguir lo deseado establecemos dos clases en CSS, para ajustar la imagen a la izquierda o derecha respectivamente.
El código sería el siguiente:
.imgizq{
float:left; /*para ponerlo a la izquierda */
margin:20px; /* un margen cualquiera */
}
.imgder{
float:right; /*para ponerlo a la derecha*/
margin:20px; /* un margen cualquiera */
}
.imgizq img, .imgder img{
display: block;
margin: 0 auto; /* centrar imagen */
border-width: 2px;
border-style:solid;
border-color: #cc6633; /* color del borde */
}
.imgizq p, .imgder p{
text-align:center;
font-weight:bold;
font-size: 9px;
background-color: #cc6633; /* color del fondo del pie de foto = borde*/
color:white;
margin: 0px;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 4px;
padding-left: 2px;
}
Ahora sólo tendríamos que insertar el HTML en cualquier lugar de nuestra página web de este modo:
<div class="imgizq"><img src="img/foto.jpg" alt="" /><p>Algunos de nuestros trofeos</p></div>
o
<div class="imgder"><img alt="" src="img/foto.jpg" /><p>Algunos de nuestros trofeos
Y aquí el resultado:
[image align=»center» width=»175″ height=»220″ src=»/wp-content/uploads/2011/09/pie-de-foto.jpg» alt=»Pie de foto» lightbox=»true»]
