Html div内垂直对齐跨度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21577730/
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 span inside div
提问by Johannes
<div class="container">
<span>Some text, yay</span>
</div>
<div class="container">
<span>Some text, yay. But shit time, there is alot of text, so we get a problem with breaking lines and the given height :( How can I align vertical now?</span>
</div>
<style>
.container {
width: 100%;
height: 50px;
line-height: 50px;
border: 1px solid black;
}
.container span {
padding-left: 30px;
}
</style>
This solution works great until the screen-width is too small - breaking my text into several lines.
这个解决方案很好用，直到屏幕宽度太小 - 将我的文本分成几行。
When I google the problem I find so many crazy over-complicated solutions with javascript and divs to push my content in place.. Can anyone help me make this work without adding more markup? :)
当我用谷歌搜索这个问题时，我发现有很多疯狂的、过于复杂的解决方案，使用 javascript 和 div 来推送我的内容。有人可以帮助我在不添加更多标记的情况下完成这项工作吗？:)
There's no need to support Internet Explorer and older browsers.
无需支持 Internet Explorer 和较旧的浏览器。
Thanks
谢谢
采纳答案by Ishank Gupta
Update you CSS to
将您的 CSS 更新为
.container {
width: 100%;
height: 50px;
display: table-cell;
border: 1px solid black;
text-align: center;
vertical-align: middle;
}
.container span {
}
回答by UsmanZ
You should try this:
你应该试试这个：
.container {
width: 100%;
height: 50px;
border: 1px solid black;
display: table;
text-align: center;
}
.container span {
display: table-cell;
vertical-align: middle;
}
