html - 如何在 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。优点是这些标签增加了文档的语义结构。视觉上没有区别，但它可能(正面)影响页面的可用性和可索引性。

标签不同，但代码结构完全相同，如您在更新后的代码段和 fiddle 中所见:

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