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

我是一个新手。我终于想出了如何让我的index.html中的主页上的图像与我的default.css中的代码一致。如何在HTML和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; 
}

来源

2013-10-25 Stephanie

尝试：

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

来源

2013-10-25 19:46:10 keeg

裹在一个容器中的图像，并把文字在他们下面。事情是这样的：

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

来源

2013-10-25 19:50:03 nzifnab

你应该换行图像一个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>

来源

2013-10-25 19:51:11 j0hnstew

您可以随时使用HTML 5数字标签。（假设您的网站遵循HTML 5标准）。这样，您可以嵌套标签并对其进行设计。

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

这样你就可以用CSS来选择它们了。

来源

2013-10-25 19:51:43

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

回答

相关问题