web-dev-qa-db-fra.com

Comment aligner la légende sous l'image

J'ai 9 images au total et trois sur chaque ligne, j'ai réussi à ajouter une légende pour l'une de mes images, mais je n'ai pas réussi à le faire pour les autres car elle centre tout simplement en dessous et pas le texte aligné sur les lignes par image.

<figure>
<center>
<img src='images/album1.jpg' alt='missing' />
<figcaption>Album name goes here
<br>Year goes here
<br>artist name goes here</figcaption>

<img src='images/album2.jpg' alt='missing' />
<figcaption>Album name goes here
<br>Year goes here
<br>artist name goes here</figcaption>

<img src='images/album2.jpg' alt='missing' />
<figcaption>Album name goes here
<br>Year goes here
<br>artist name goes here</figcaption>
</figure><center>

Etc.

htmlcsslayoutcaption
13
Brian Lam

Je configurerais le code de cette façon:

<figure>
    <img src='http://placehold.it/200x200' alt='missing' />
    <figcaption>Album name goes here
        <br>Year goes here
        <br>artist name goes here</figcaption>
</figure>

et appliquez le CSS suivant:

figure {
    display: inline-block;
    border: 1px dotted gray;
    margin: 20px; /* adjust as needed */
}
figure img {
    vertical-align: top;
}
figure figcaption {
    border: 1px dotted blue;
    text-align: center;
}

Étant donné que chaque figure est un bloc en ligne, vous pouvez essentiellement répéter l'unité trois fois par ligne, soit en ajoutant un <br> Après le troisième, soit en encapsulant trois dans un élément de bloc, soit en utilisant un sélecteur CSS3 nth-of-type(3n) pour ajouter un saut de ligne ou similaire.

Utilisez text-align: center Sur figcaption pour aligner le test au centre.

Voir la démo sur: http://jsfiddle.net/audetwebdesign/4njG8/

Les résultats ressemblent à ceci (pour un écran assez large):

enter image description here

32
Marc Audet

cela fonctionne pour moi.

figure {
  display: inline-block;
  text-align: center;
  border: 1px dotted gray;
  margin: 5px; /* adjust as needed */
}
figure img {
  vertical-align: top;
}
figure figcaption {
  border: 1px dotted blue;
}

alignement du texte: centre; est la seule chose nécessaire.

2
anatak

Chaque figure ne doit contenir qu'une image et une figcaption.

<figure>
    <img>
   <figcaption>
   </figcaption>
</figure>

BTW ... l'élément 'central' n'existe plus.

Exemple de codepen

1
Paulie_D