html - How to align text below an image in CSS?

Question

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>

If I add a paragraph text between img1 and img2 they get separated (img2 goes to a newline)

What I'm attempting to do is this (with some space between the images):

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

I haven't given the images their own individual class names because the images don't align horizontally to one another.

question from:https://stackoverflow.com/questions/22592064/how-to-align-text-below-an-image-in-css

Answer 1

Add a container div for the image and the caption:

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

Then, with a bit of CSS, you can make an automatically wrapping image gallery:

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>