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

＆＃13;

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

＆＃13;

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

＆＃13;

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

更新回答

而不是使用匿名＆＃39; div和span，您还可以使用HTML5 figure和figcaption元素。优点是这些标签增加了文档的语义结构。在视觉上没有区别，但它可能（积极地）影响页面的可用性和可索引性。

标签不同，但代码的结构完全相同，正如您在此更新的代码段和小提琴中所看到的那样：

<figure class="item">
    <img src=""/>
    <figcaption class="caption">Text below the image</figcaption>
</figure>

＆＃13;

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

＆＃13;

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

＆＃13;

http://jsfiddle.net/ZhLk4/379/

Answer 2

最好的方法是用DIV包装Image和Paragraph文本并指定一个类。

实施例

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

Answer 3

您可以使用HTML5标题功能。

Answer 4

最简单的方法，特别是如果你不知道图像宽度是将标题放在它自己的div元素中，定义它要清除：两者！

...

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

Answer 5

我在这里为你创建了一个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>

Answer 6

由于块元素的默认值是在另一个上面排序，你也应该能够这样做：

PresentationTraceSources.DataBindingSource

Answer 7

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

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;

   }

如何在CSS中对齐图像下方的文本？

7 个答案:

实施例