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 figure标记。（假设您的网站遵循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/a6pNw/

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>

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

4 个答案: