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>
Comentaris
Comentat per Pere el 17/10/05
Senzill i útil.
Comentat per Joan el 18/10/05
Molt interessant. Però si la imatge està envoltada de text a la dreta i a sota, la cosa es complica perquè el margin ja no es "auto" sinó que li'n defineixes altres paràmetres (en el meu cas "margin: 0 20px 10px 0).
Ho he probat obviant el "margin:auto" i deixant els paràmetres de margin corresponents, però el peu em surt a la part superior dreta de la imatge. Alguna proposta perquè el peu vagi a sota la foto amb text al voltant?
Comentat per are el 18/10/05
Si t'hi fixes veuras que qualsevol element d'HTML és una caixa i el comportament és practicament sempre el mateix.
Per tant, si per rodejar una imatge de text feia
img {float: left;}, per rodejar un grup imatge + peu el que hauré de fer és.imatgeAmbPeu {float: left;}Quan treballes amb CSS les solucions venen soles si combines conceptes però poques vegades et vindran donades.
Comentat per Blai el 21/02/07
Provant aquest exemple em trobo que, entre "una-imatge.png" i la caixa "peu" em deixa sempre un marge d'uns 10px aprox., no se perquè ni trobo manera de que no surti. Alguna explicació o suggeriment ?
Comentat per are el 22/02/07
Probablement sigui pels marges que té per defecte el paràgraf.