Imatge amb peu

Publicat el 16/10/2004

Aquesta solució tot i que no m'agrada és l'única que conec per tal de contemplar tots els casos.

Una estructura XHTML òptima per contemplar la majoria de casos seria:


<div class="imatge-amb-peu">
   <img src="una-imatge.png" alt="una-descripció" />
   <div class="peu">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
      <p> Cras rhoncus volutpat tortor. Curabitur ut orci. Duis lacus.</p>
   </div>
</div>

Aplicant una amplada a la caixa peu igual que la de la imatge el peu quedaria acotat.

Fent que la imatge es comporti com un bloc i aplicant una amplada determinada a la caixa imatge-amb-peu es pot aconseguir centrar la imatge i el peu facilment:


.imatge-amb-peu {
   width: 20em;
}
img {
   display: block;
   margin: auto;
}
.peu {
   margin: auto;
}

Cal realment tot aquest codi?

No, si tens una casuística acotada es pot simplificar.

Per exemple, suposant que mai existirà un peu d'imatge superior a un paràgraf l'estructura es pot deixar en:


<div class="imatge-amb-peu">
   <img src="una-imatge.png" alt="una-descripció" />
   <p  class="peu">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>