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