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</p></div>

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”]