html - 如何在 HTML 和 CSS 中水平对齐的图像下添加文本

Question

我是新手。我终于想出了如何在我的 index.html 中的主页上对齐图像以及我的 default.css 中的代码。

现在我想在每个图像下添加文本。我知道这应该很容易，但找不到任何似乎可行的方法。

这是我的 HTML 代码：

<div id="random">
    <img src="1.jpg" />
    <img src="2.jpg" />
    <img src="3.jpg" />
</div>

这是我的 CSS 代码：

#random{ 
     max-width: 650px
}

#random img{
    display:inline-block;
    width:80px;
}

Answer 1

将您的图像包装在一个容器中，并将文本放在它们下面。像这样的东西：

http://jsfiddle.net/8xf2N/1/

<div id="random">
    <div class='img-container'>
      <img src="1.jpg" />
      <p>Image One</p>
    </div>
    <div class='img-container'>
      <img src="2.jpg" />
      <p>Image Two</p>
    </div>
    <div class='img-container'>
      <img src="3.jpg" />
      <p> Image Three</p>
    </div>
</div>

CSS：

#random{ 
     max-width: 650px
}

#random img{
    width:80px;
}

.img-container{
    display: inline-block;
}

Answer 2

您始终可以使用 HTML 5 图形标记。（假设您的网站遵循 HTML 5 标准）。这样，您可以嵌套标签并设置它们的样式。

<div id="random>
    <figure>
         <img src="1.jpg"/>
         <figcaption>Your Caption</figcaption>
    </figure>
</div>

这样，您也可以使用 CSS 选择器来设置它们的样式。

Answer 3

尝试：

#random{ 
     max-width: 650px
}

#random .image-wrap{
    display:inline-block;
    width:80px;
}


<div id="random">
    <div class="image-wrap">
        <img src="1.jpg" />
        <p>Text for image 1</p>
    </div>
    <div class="image-wrap">
        <img src="2.jpg" />
        <p>Text for image 2</p>
    </div>
    <div class="image-wrap">
        <img src="2.jpg" />
        <p>Text for image 2</p>
    </div>
</div>

Answer 4

您应该将图像包装在 div 中。这是一个小提琴http://jsfiddle.net/a6p​​Nw/

CSS：

#random{ 
 max-width: 650px
}

#random div{
 display:inline-block;
 width:80px;
 text-align:center;
}

HTML：

<div id="random">
<div>
    <img src="http://placehold.it/80x80" />
    <p>Some text</p>
</div>
<div>
    <img src="http://placehold.it/80x80" />
    <p>Some text</p>
</div>
<div>
    <img src="http://placehold.it/80x80" />
    <p>Some text</p>
</div>