如何在CSS中的图像下方对齐文本？ [英] How to align text below an image in CSS?

问题描述

HTML

 < div class =image1> 
< img src =images / img1.pngwidth =250height =444alt =屏幕1/> 
< img src =images / img2.pngwidth =250height =444alt =屏幕2/> 
< img src =../ images / img3.pngwidth =250height =444alt =屏幕3/> 
< / div> 
  

如果我在img1和img2之间添加段落文本，它们会被分开（img2转到换行符） / p>

我试图做的是这个（图片之间有一些空格）：

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

解决方案 / div>

为图片和标题添加容器div：

 < div class =item> ; 
< img src =/> 
< span class =caption>图片下方的文字< / span> 
< / div> 
  

然后，用一点CSS，你可以自动包装图片库：

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

  div.item {/ *要正确对齐图像，不管内容高度：* / vertical-align：top; display：inline-block; / *水平居中的图像和标题* / text-align：center; / *容器的宽度也意味着图像周围的边距。 * / width：120px;} img {width：100px; height：100px; background-color：gray;}。caption {/ *使标题成为一个块，使它占据自己的行。 * / display：block;}  

 < div class = item> < img src =/> < span class =caption>图片下方的文字< / span>< / div>< div class =item> < img src =/> < span class =caption>图片下方的文字< / span>< / div>< div class =item> < img src =/> < span class =caption>< span class =caption>图片下方的一条更长的文字，应该占据多行。< / span>< / div>< < img src =/> < span class =caption>图片下方的文字< / span>< / div>< div class =item> < img src =/> < span class =caption>图片下方的文字< / span>< / div>< div class =item> < img src =/> < / span>  =  

http：// jsfiddle .net / ZhLk4 / 1 /

更新的答案

除了使用anonymousdiv和span之外，您还可以使用HTML5 figure 和 figcaption 元素。优点是这些标签添加到文档的语义结构。视觉上没有区别，但它可能（积极地）影响您的网页的可用性和可索引性。

标签是不同的，但代码的结构正是同样，你可以看到在这个更新的片段和小提琴：

 < figure class = item> 
< img src =/> 
< figcaption class =caption>文字下方的文字< / figcaption> 
< / figure> 
  

  figure.item {/ *要正确对齐图像，不管内容高度：* / vertical-align：top; display：inline-block; / *水平居中的图像和标题* / text-align：center; / *容器的宽度也意味着图像周围的边距。 * / width：120px;} img {width：100px; height：100px; background-color：gray;}。caption {/ *使标题成为一个块，使它占据自己的行。 * / display：block;}  

 < item> < img src =/> < figcaption class =caption>图片下方的文字< / figcaption>< / figure>< figure class =item> < img src =/> < figcaption class =caption>图片下方的文字< / figcaption>< / figure>< figure class =item> < img src =/> < / figcaption>< / figure>< figure class =item>< figcaption class =caption>图片下方有一个更长的文字， < img src =/> < figcaption class =caption>图片下方的文字< / figcaption>< / figure>< figure class =item> < img src =/> < figcaption class =caption>图片下方的文字< / figcaption>< / figure>< figure class =item> < img src =/> < / figcaption>< / figure>  

http：// jsfiddle .net / ZhLk4 / 379 /

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.

解决方案

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>

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

Updated answer

Instead of using 'anonymous' div and spans, you can also use the HTML5 figure and figcaption elements. The advantage is that these tags add to the semantic structure of the document. Visually there is no difference, but it may (positively) affect the usability and indexability of your pages.

The tags are different, but the structure of the code is exactly the same, as you can see in this updated snippet and 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/

这篇关于如何在CSS中的图像下方对齐文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！