如何在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>

如果我在img1和img2之间添加段落文本,它们会分开(img2转到换行符)

我试图做的是(图像之间有一些空间):

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

我没有给图像提供各自的类名,因为图像不会彼此水平对齐.

Answer 1

为图像和标题添加容器div:

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

然后,通过一些CSS,您可以创建一个自动包装的图库:

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/

更新的答案

您也可以使用HTML5 figure和figcaption元素,而不是使用"匿名"div和span .优点是这些标签增加了文档的语义结构.在视觉上没有区别,但它可能(积极地)影响页面的可用性和可索引性.

标签是不同的,但代码的结构完全相同,你可以在这个更新的片段和小提琴中看到:

<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/