CSS 如何垂直对齐浮动图像旁边的文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10516157/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to vertically align text next to a floated image?
提问by Mosijava
I want to vertically align a span after a floated image. I searched for it in stack overflow and find this post. but my image is floated.
我想在浮动图像后垂直对齐跨度。我在堆栈溢出中搜索它并找到了这篇文章。但我的形象是浮动的。
<div>
<img style="width:30px;height:30px; float:left">
<span style="vertical-align:middle">Doesn't work.</span>
</div>
I give vertical-align:middleto image and nothing change!
我给vertical-align:middle形象，没有任何改变！
Thanks
谢谢
采纳答案by sandeep
First remove floatfrom it. Write like this:
首先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>
Check this http://jsfiddle.net/ws3Uf/
回答by The Codesee
Even though this is an extremely old post, you can achieve this using Flexbox:
尽管这是一篇非常古老的帖子，但您可以使用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>回答by ScottS
Add line-height(equal to picture height):
添加line-height（等于图片高度）：
<div>
<img style="width:30px;height:30px; float:left">
<span style="vertical-align:middle; line-height: 30px;">Works!</span>
</div>
回答by huMpty duMpty
回答by atmd
A <span>is an inline element, try adding display:blockto the span, give it the same height as the image and a line height to match. Float it left as well. That should work
A<span>是一个内联元素，尝试添加display:block到跨度，赋予它与图像相同的高度和匹配的行高。将它也向左浮动。那应该工作
回答by Franz Fahrenkrog Petermann
You could do the following:
您可以执行以下操作：
div:after {
content:"";
clear:both;
display:block;
}
