Html 垂直对齐：中间不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7967217/
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
vertical-align: middle doesn't work
提问by Randomblue
The css property vertical-align: middledoes not work in this example.
css 属性vertical-align: middle在此示例中不起作用。
HTML:
HTML：
<div>
<span class='twoline'>Two line text</span>
<span class='float'> Float right </span>
</div>
CSS:
CSS：
.float {
float: right;
}
.twoline {
width: 50px;
display: inline-block;
}
div {
border: solid 1px blue;
vertical-align: middle;
}
The spanthat is floating on the right is not vertically centered with respect to its containing div. How can I have it vertically centered?
的span是在右侧浮动不垂直居中相对于包含其div。我怎样才能让它垂直居中？
The above code is in this fiddle.
上面的代码在这个 fiddle 中。
回答by Matt K
You must wrap your element in a table-cell, within a tableusing display.
您必须将元素包装在 a 中table-cell，在tableusing 中display。
Like this:
像这样：
<div>
<span class='twoline'>Two line text</span>
<span class='float'>Float right</span>
</div>
and
和
.float {
display: table-cell;
vertical-align: middle;
text-align: right;
}
.twoline {
width: 50px;
display: table-cell;
}
div {
display: table;
border: solid 1px blue;
width: 500px;
height: 100px;
}
Shown here: http://jsfiddle.net/e8ESb/7/
显示在这里：http: //jsfiddle.net/e8ESb/7/
回答by GlyphGryph
Vertical align doesn't quite work the way you want it to. See: http://phrogz.net/css/vertical-align/index.html
垂直对齐并不像您希望的那样工作。见：http: //phrogz.net/css/vertical-align/index.html
This isn't pretty, but it WILL do what you want: Vertical align behaves as expected only when used in a table cell.
这不是很好，但它会做你想做的事：垂直对齐只有在表格单元格中使用时才会按预期运行。
There are other alternatives: You can declare things as tables or table cells within CSS to make them behave as desired, for example. Margins and positioning can sometimes be played with to get the same effect. None of the solutions are terrible pretty, though.
还有其他替代方法：例如，您可以在 CSS 中将事物声明为表格或表格单元格，以使其行为符合要求。有时可以使用边距和定位来获得相同的效果。但是，没有一个解决方案非常糟糕。
回答by Afifa Rih
You should set a fixed value to your span's line-heightproperty:
您应该为您的跨度line-height属性设置一个固定值：
.float, .twoline {
line-height: 100px;
}
回答by Akshaya Shanbhogue
The answer given by Matt K works perfectly fine.
Matt K 给出的答案非常有效。
However it is important to note one thing - If the div you are applying it to has absolute positioning, it wont work. For it to work, do this -
但是，重要的是要注意一件事 - 如果您应用它的 div 具有绝对定位，则它将不起作用。为了让它工作，这样做 -
<div style="position:absolute; hei...">
<div style="position:relative; display: table-cell; vertical-align:middle; hei...">
<!-- here position MUST be relative, this div acts as a wrapper-->
...
</div>
</div>
