如何垂直对齐浮动图像旁边的文本？
如何垂直对齐浮动图像旁边的文本？
提问于 2012-05-09 20:31:29
我想垂直对齐一个浮动图像后的跨度。我在堆栈溢出中搜索了它，找到了this post。但我的形象是漂浮的。
<div>
<img style="width:30px;height:30px; float:left">
<span style="vertical-align:middle">Doesn't work.</span>
</div>我将vertical-align:middle用于图像，但什么都没有改变！
谢谢
回答 6
Stack Overflow用户
回答已采纳
发布于 2012-05-09 20:40:57
首先从其中删除float。像这样写：
<img style="width:30px;height:30px;vertical-align:middle" src="http://lorempixel.com/output/abstract-q-c-640-480-8.jpg">
<span>Doesn't work.</span>Stack Overflow用户
发布于 2016-07-03 18:19:18
即使这是一个非常古老的帖子，您也可以使用Flexbox实现这一点
div {
display: flex;
align-items: center;
}<div>
<img style="width:30px;height:30px;" src="http://lorempixel.com/output/abstract-q-c-640-480-8.jpg" />
<span>Doesn't work.</span>
</div>
Stack Overflow用户
发布于 2012-05-09 20:46:04
添加line-height (等于图片高度)：
<div>
<img style="width:30px;height:30px; float:left">
<span style="vertical-align:middle; line-height: 30px;">Works!</span>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10516157
复制相关文章
相似问题