Html CSS垂直对齐不适用于浮动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11718134/
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
CSS Vertical align does not work with float
提问by user1355300
How can I use the vertical-alignas well as floatin the divproperties? The vertical-alignworks fine if I do not use the float. But if I use the float, then it does not work. It is important for me to use the float:rightfor the last div.
我如何使用vertical-align，以及float在div性能？的vertical-align，如果我不使用工作正常float。但是如果我使用浮点数，则它不起作用。对我来说使用float:right最后一个 div很重要。
I am trying following, if you remove the float from all div's then it would work fine:
我正在尝试遵循，如果您从所有 div 中删除浮动，那么它会正常工作：
<div class="wrap">
<div class="left">First div, float left, has more text.</div>
<div class="left2">Second div, float left </div>
<div class="right">Third div, float right</div>
</div>
CSS:
CSS：
.wrap{
width: 500px;
overflow:hidden;
background: pink;
}
.left {
width: 150px;
margin-right: 10px;
background: yellow;
float:left;
vertical-align: middle;
display:inline-block
}
.left2 {
width: 150px;
margin-right: 10px;
background: aqua;
float:left;
vertical-align: middle;
display:inline-block
}
.right{
width: 150px;
background: orange;
float:right;
vertical-align: middle;
display:inline-block
}
回答by Anders B
You need to set line-height.
您需要设置行高。
<div style="border: 1px solid red;">
<span style="font-size: 38px; vertical-align:middle; float:left; line-height: 38px">Hejsan</span>
<span style="font-size: 13px; vertical-align:middle; float:right; line-height: 38px">svejsan</span>
<div style="clear: both;"></div>
回答by Ahsan Khurshid
Edited:
编辑：
The vertical-alignCSS property specifies the vertical alignment of an inline, inline-block or table-cell element.
该垂直对齐CSS属性指定内嵌，内联块或表格单元元件的垂直取向。
Read this article for Understanding vertical-align
阅读这篇文章了解垂直对齐
回答by Gabriel
Vertical alignment doesn't work with floated elements, indeed. That's because float lifts the element from the normal flow of the document. You might want to use other vertical aligning techniques, like the ones based on transform, display: table, absolute positioning, line-height, js (last resort maybe) or even the plain old html table (maybe the first choice if the content is actually tabular). You'll find that there's a heated debate on this issue.
垂直对齐确实不适用于浮动元素。那是因为 float 从文档的正常流中提升了元素。您可能想要使用其他垂直对齐技术，例如基于变换、显示：表格、绝对定位、行高、js（可能是最后的手段）甚至是普通的旧 html 表格（如果内容是实际上是表格）。你会发现在这个问题上有一场激烈的辩论。
However, this is how you can vertically align YOUR 3 divs:
但是，这是垂直对齐 3 个 div 的方法：
.wrap{
width: 500px;
overflow:hidden;
background: pink;
}
.left {
width: 150px;
margin-right: 10px;
background: yellow;
display:inline-block;
vertical-align: middle;
}
.left2 {
width: 150px;
margin-right: 10px;
background: aqua;
display:inline-block;
vertical-align: middle;
}
.right{
width: 150px;
background: orange;
display:inline-block;
vertical-align: middle;
}
Not sure why you needed both fixed width, display: inline-block and floating.
不知道为什么你需要固定宽度，显示：内联块和浮动。
