logo标签列表

如何在CSS中使文本与图片对齐？

htmlcss
50

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]

我没有给这些图片单独的类名，因为它们无法在水平方向上对齐。

请创建一个JSFiddle，以帮助正确理解场景。 - Sully
7个回答
118

为图像和标题添加容器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/

更新的答案

不必使用“anonymous”div和spans，你也可以使用HTML5中的figure和figcaption元素。这样做的好处是可以增加文档的语义结构。虽然在视觉上没有区别，但它可能会（积极地）影响页面的可用性和可索引性。

标签不同，但代码结构完全相同，如下所示：

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

需要将div元素设置为“inline-block”吗？如果我将div元素设置为inline-block，则不允许任何其他div放置在同一行。 - Teddu
@Teddu，主要需要使用inline-block是因为其他的div可能会在其旁边。另一种选择是使用float，但我通常不太满意。你给这个div设置了宽度吗？如果没有（小）宽度，该div可能会占用过大的空间，从而将其他div推到下一行。 - GolezTrol
4
最佳方法是使用DIV包装图像和段落文本，并分配一个类。

示例：

<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>
不要忘记将text-align:center设置为wrapper。 - Banana
2

由于块元素的默认顺序是一个在另一个上方，因此您还应该能够执行以下操作：

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

img {
    display: block;
}
1
最简单的方法，特别是如果您不知道图像的宽度，就是将标题放在自己的div元素中并定义为清除:both！

...

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

...

在样式块中定义。
div.caption: {
  float: left;
  clear: both;
}
1
你可以使用HTML5的标题功能。
1
@desingerNProgrammer，那是完美的答案。 - Cloudboy22
1
我为您创建了一个jsfiddle链接，此处是JSFiddle HTML & CSS Example。 CSS 
div.raspberry {
    float: left;
    margin: 2px;
}

div p {
    text-align: center;
}

HTML（在上面应用CSS以获取所需内容）

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

我选择背景选项而不是图片：

HTML：

  <div class="class1">
   <p>Some paragraph, Some paragraph, Some paragraph, Some paragraph, Some paragraph, 
   </p>
  </div>    
  <div class="class2">
   <p>Some paragraph, Some paragraph, Some paragraph, Some paragraph, Some paragraph, 
   </p>
  </div>
  <div class="class3">
   <p>Some paragraph, Some paragraph, Some paragraph, Some paragraph, Some paragraph, 
   </p>
  </div>

CSS：

  .class1 {

    background: url("Some.png") no-repeat top center;
    text-align: center;

   }

  .class2 {

    background: url("Some2.png") no-repeat top center;
    text-align: center;

   }

  .class3 {

    background: url("Some3.png") no-repeat top center;
    text-align: center;

   }
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接