Imágenes con título. Pie de foto

Imágenes con título. Pie de foto

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