Html CSS垂直对齐浮动div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9430929/
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 vertically align floating divs
提问by Marc
I have a div (#wrapper) containing 2 divs standing side by side.
我有一个 div (#wrapper)，其中包含 2 个并排站立的 div。
I would like the right-div to be vertically aligned. I tried vertical-align:middle on my main wrapper but it is not working. It is driving me crazy!
我希望右 div 垂直对齐。我在主包装器上尝试了 vertical-align:middle 但它不起作用。它让我发疯！
Hope someone can help.
希望有人能帮忙。
HTML:
HTML：
<div id="wrapper">
<div id="left-div">
<ul>
<li>One</li>
<li>Two</li>
</ul>
</div>
<div id="right-div">
Here some text...
</div>
</div>
CSS:
CSS：
#wrapper{
width:400px;
float:left;
height:auto;
border:1px solid purple;}
#left-div{
width:40px;
border:1px solid blue;
float:left;}
#right-div{
width:350px;
border:1px solid red;
float:left;}
ul{
list-style-type: none;
padding:0;
margin:0;}
采纳答案by yunzen
You have no luck with floated elements. They don't obey vertical-align,
你对浮动元素不走运。他们不遵守垂直对齐，
you need, display:inline-blockinstead:
你需要，display:inline-block而不是：
BEWARE
谨防
Be careful with display: inline-block;as it interpretes the white-space between the elements as real white-space. It does not ignores it like display: blockdoes.
小心，display: inline-block;因为它将元素之间的空白解释为真正的空白。它不会像display: block那样忽略它。
I recommend this:
我推荐这个：
Set the font-sizeof the containing element to 0(zero) and reset the font-sizeto your needed value in the elements like so
将font-size包含元素的 设置为0（零）并将 重置font-size为元素中所需的值，如下所示
ul {
margin: 0;
padding: 0;
list-style: none;
font-size: 0;
}
ul > li {
font-size: 12px;
}
See a demonstration here: http://codepen.io/HerrSerker/pen/mslay
在此处查看演示：http: //codepen.io/HerrSerker/pen/mslay
CSS
CSS
#wrapper{
width:400px;
height:auto;
border:1px solid green;
vertical-align: middle;
font-size: 0;
}
#left-div{
width:40px;
border:1px solid blue;
display: inline-block;
font-size: initial;
/* IE 7 hack */
*zoom:1;
*display: inline;
vertical-align: middle;
}
#right-div{
width:336px;
border:1px solid red;
display: inline-block;
font-size: initial;
/* IE 7 hack */
*zoom:1;
*display: inline;
vertical-align: middle;
}
回答by SpaceBeers
You can do this quite easily with display table and display table-cell.
您可以使用显示表格和显示表格单元轻松完成此操作。
#wrapper {
width: 400px;
float: left;
height: auto;
display: table;
border: 1px solid green;
}
#right-div {
width: 356px;
border: 1px solid red;
display: table-cell;
vertical-align: middle;
}
EDIT:Actually quickly messed around on CSS Desk for you - http://cssdesk.com/RXghg
编辑：实际上很快就在 CSS Desk 上为你搞砸了 - http://cssdesk.com/RXghg
ANOTHER EDIT:Use Flexbox. This will work but it's pretty outdated - http://www.cssdesk.com/davf5
另一个编辑：使用 Flexbox。这会起作用，但它已经过时了 - http://www.cssdesk.com/davf5
#wrapper {
display: flex;
align-items: center;
border:1px solid green;
}
#left-div {
border:1px solid blue;
}
#right-div {
border:1px solid red;
}
回答by Justin Drury
I realize this is an ancient question however I thought it would be useful to post a solution to the float vertical alignment issue.
我意识到这是一个古老的问题，但是我认为发布浮动垂直对齐问题的解决方案会很有用。
By creating a wrapper around the content you want floated, you can then use the ::after or ::before pseudo selectors to vertically align your content within the wrapper. You can adjust the size of that content all you want without it affecting the alignment. The only catch is that the wrapper must fill 100% height of itscontainer.
通过在您想要浮动的内容周围创建一个包装器，您可以使用 ::after 或 ::before 伪选择器在包装器中垂直对齐您的内容。您可以随意调整该内容的大小，而不会影响对齐。唯一的问题是包装纸必须填充其容器的100% 高度。
http://jsfiddle.net/jmdrury/J53SJ/
http://jsfiddle.net/jmdrury/J53SJ/
HTML
HTML
<div class="container">
<span class="floater">
<span class="centered">floated</span>
</span>
<h1>some text</h1>
</div>
CSS
CSS
div {
border:1px solid red;
height:100px;
width:100%;
vertical-align:middle;
display:inline-block;
box-sizing: border-box;
}
.floater {
float:right;
display:inline-block;
height:100%;
box-sizing: border-box;
}
.centered {
border:1px solid blue;
height: 30px;
vertical-align:middle;
display:inline-block;
box-sizing: border-box;
}
h1 {
margin:0;
vertical-align:middle;
display:inline-block;
box-sizing: border-box;
}
.container:after, .floater:after, .centered:after, h1:after {
height:100%;
content:'';
font-size:0;
vertical-align:middle;
display:inline-block;
box-sizing: border-box;
}
回答by Vilson Vieira
A possible solution is to make wrapper divflexwith items aligned on centeras specified by https://spin.atomicobject.com/2016/06/18/vertically-center-floated-elements-flexbox/.
一个可能的解决方案是使包装器divflex与https://spin.atomicobject.com/2016/06/18/vertically-center-floated-elements-flexbox/center指定的对齐项目。
回答by Maoritzio
I do my best to avoid using floats... but - when needed, I vertically align to the middle using the following lines:
我尽量避免使用浮动...但是 - 需要时，我使用以下几行垂直对齐到中间：
position: relative;
top: 50%;
transform: translateY(-50%);
回答by Sean Carruthers
The only downfall of my modifications is you have a set div height...I don't know if that's a problem for you or not.
我修改的唯一缺点是你有一个设置的 div 高度......我不知道这对你来说是否有问题。
