如何在块元素中垂直对图像和文本进行居中？[CSS]
如何在块元素中垂直对图像和文本进行居中？[CSS]
提问于 2010-08-23 20:07:44
我正试图用CSS来完成这个任务。这是我的标记：
<h2>
<img src="A.gif" alt="A" width="30" height="30" />
<img src="B.gif" alt="B" width="30" height="30" />
18 pt; vertically centered;
</h2>A和B为30×30像素图像，- 小红线为5像素/边距(以哪种效果为准)
- ，由于图像的高度和垂直填充，最外层容器的高度为40 of (30+5+5).
- The，最外层容器的宽度为100%。
注意：没有可能18 of文本会溢出容器的宽度。假设它总是一条线。
注意:如果更多的标记有助于获得所需的视图，则可以修改标记。
如何才能做到这一点？
回答 2
Stack Overflow用户
回答已采纳
发布于 2010-08-23 20:15:05
如果我没有弄错，您可以在一个vertical-align: text-bottom上使用img属性来实现这种结果。
下面是一个小小的测试：http://www.w3schools.com/Css/tryit.asp?filename=trycss_vertical-align
您可以尝试移除那里的样式并将它们替换为
img { vertical-align: text-bottom; }
文本应该与页面元素的中心对齐。
Stack Overflow用户
发布于 2010-08-23 20:11:03
您可以将直线高度设置为40 is，这将导致文本垂直中心，如果它只是一行。
h2 {
line-height: 40px;
}
h2 img {
padding: 5px;
vertical-align: middle;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/3551254
复制相关文章
相似问题
腾讯云开发者
