web-dev-qa-db-fra.com

Comment aligner du texte sous une image en CSS?

HTML

  <div class="image1">
  <img src="images/img1.png" width="250" height="444" alt="Screen 1"/>
    <img src="images/img2.png" width="250" height="444" alt="Screen 2"/>
              <img src="../images/img3.png" width="250" height="444" alt="Screen 3"/>
  </div>

Si j'ajoute un texte de paragraphe entre img1 et img2, ils sont séparés (img2 passe à une nouvelle ligne)

Voici ce que je tente de faire (avec un peu d’espace entre les images): 

[image1] [image2] [image3]
 [text]   [text]   [text]

Je n'ai pas donné aux images leur propre nom de classe car les images ne sont pas alignées horizontalement les unes sur les autres.

jqueryhtmlcss
30
Adz

Ajoutez un conteneur div pour l'image et la légende:

<div class="item">
    <img src=""/>
    <span class="caption">Text below the image</span>
</div>

Ensuite, avec un peu de CSS, vous pouvez créer une galerie d’images enveloppant automatiquement:

div.item {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 120px;
}
img {
    width: 100px;
    height: 100px;
    background-color: grey;
}
.caption {
    display: block;
}


div.item {
    /* To correctly align image, regardless of content height: */
    vertical-align: top;
    display: inline-block;
    /* To horizontally center images and caption */
    text-align: center;
    /* The width of the container also implies margin around the images. */
    width: 120px;
}
img {
    width: 100px;
    height: 100px;
    background-color: grey;
}
.caption {
    /* Make the caption a block so it occupies its own line. */
    display: block;
}
<div class="item">
    <img src=""/>
    <span class="caption">Text below the image</span>
</div>
<div class="item">
    <img src=""/>
    <span class="caption">Text below the image</span>
</div>
<div class="item">
    <img src=""/>
    <span class="caption">An even longer text below the image which should take up multiple lines.</span>
</div>
<div class="item">
    <img src=""/>
    <span class="caption">Text below the image</span>
</div>
<div class="item">
    <img src=""/>
    <span class="caption">Text below the image</span>
</div>
<div class="item">
    <img src=""/>
    <span class="caption">An even longer text below the image which should take up multiple lines.</span>
</div>

http://jsfiddle.net/ZhLk4/1/

Réponse mise à jour

Au lieu d’utiliser div et spans «anonymes», vous pouvez également utiliser les éléments HTML5 figure et figcaption. L'avantage est que ces balises s'ajoutent à la structure sémantique du document. Visuellement, il n'y a pas de différence, mais cela peut affecter (positivement) la facilité d'utilisation et l'indexabilité de vos pages.

Les balises sont différentes, mais la structure du code est exactement la même, comme vous pouvez le voir dans cet extrait et violon mis à jour:

<figure class="item">
    <img src=""/>
    <figcaption class="caption">Text below the image</figcaption>
</figure>


figure.item {
    /* To correctly align image, regardless of content height: */
    vertical-align: top;
    display: inline-block;
    /* To horizontally center images and caption */
    text-align: center;
    /* The width of the container also implies margin around the images. */
    width: 120px;
}
img {
    width: 100px;
    height: 100px;
    background-color: grey;
}
.caption {
    /* Make the caption a block so it occupies its own line. */
    display: block;
}
<figure class="item">
    <img src=""/>
    <figcaption class="caption">Text below the image</figcaption>
</figure>
<figure class="item">
    <img src=""/>
    <figcaption class="caption">Text below the image</figcaption>
</figure>
<figure class="item">
    <img src=""/>
    <figcaption class="caption">An even longer text below the image which should take up multiple lines.</figcaption>
</figure>
<figure class="item">
    <img src=""/>
    <figcaption class="caption">Text below the image</figcaption>
</figure>
<figure class="item">
    <img src=""/>
    <figcaption class="caption">Text below the image</figcaption>
</figure>
<figure class="item">
    <img src=""/>
    <figcaption class="caption">An even longer text below the image which should take up multiple lines.</figcaption>
</figure>

http://jsfiddle.net/ZhLk4/379/

70
GolezTrol

Le meilleur moyen consiste à envelopper le texte Image et Paragraphe avec une DIV et à affecter une classe.

Exemple:

<div class="image1">
    <div class="imgWrapper">
        <img src="images/img1.png" width="250" height="444" alt="Screen 1"/>
        <p>It's my first Image</p>
    </div>
    ...
    ...
    ...
    ...
</div>
3
Siva Charan

Vous pouvez utiliser la fonctionnalité de légende HTML5.

2
designerNProgrammer

Le moyen le plus simple, surtout si vous ne connaissez pas la largeur des images, consiste à placer la légende dans son propre élément div et à la définir comme étant effacée: les deux!

...

<div class="pics">  
  <img class="marq" src="pic_1.jpg" />
  <div class="caption">My image 1</div>
</div>  
  <div class="pics">    
  <img class="marq" src="pic_2.jpg" />
  <div class="caption">My image 2</div>
  </div>

...

et dans le bloc de style définir 

div.caption: {
  float: left;
  clear: both;
}
1
Pekka Heinonen

Puisque la valeur par défaut pour les éléments de bloc est de les placer l'un sur l'autre, vous devriez également pouvoir le faire:

<div>
    <img src="path/to/img">
    <div>Text Under Image</div>
</div

img {
    display: block;
}
0
Jason Crosby

J'ai créé un jsfiddle pour vous ici: Exemple JSFiddle HTML & CSS

CSS

div.raspberry {
    float: left;
    margin: 2px;
}

div p {
    text-align: center;
}

HTML (appliquez CSS ci-dessus pour obtenir ce dont vous avez besoin)

<div>
    <div class = "raspberry">
        <img src="http://31.media.tumblr.com/tumblr_lwlpl7ZE4z1r8f9ino1_500.jpg" width="100" height="100" alt="Screen 2"/>
        <p>Raspberry <br> For You!</p>
    </div>
    <div class = "raspberry">
        <img src="http://31.media.tumblr.com/tumblr_lwlpl7ZE4z1r8f9ino1_500.jpg" width="100" height="100" alt="Screen 3"/>
        <p>Raspberry <br> For You!</p>
    </div>
    <div class = "raspberry">
        <img src="http://31.media.tumblr.com/tumblr_lwlpl7ZE4z1r8f9ino1_500.jpg" width="100" height="100" alt="Screen 3"/>
        <p>Raspberry <br> For You!</p>
    </div>
</div>
0
PC3SQ