div内部的垂直对齐跨度
div内部的垂直对齐跨度
提问于 2014-02-05 20:46:39
<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>这个解决方案效果很好，直到屏幕宽度太小--把我的文本分成几行。
当我在谷歌上搜索这个问题时，我发现了许多疯狂的、过于复杂的解决方案，它们使用javascript和div来推送我的内容。有人可以帮助我在不添加更多标记的情况下工作吗？:)
不需要支持Internet Explorer和较旧的浏览器。
谢谢
回答 2
Stack Overflow用户
回答已采纳
发布于 2014-02-05 20:49:39
更新您的CSS以
.container {
width: 100%;
height: 50px;
display: table-cell;
border: 1px solid black;
text-align: center;
vertical-align: middle;
}
.container span {
}Stack Overflow用户
发布于 2014-02-05 21:12:36
你应该试试这个：
.container {
width: 100%;
height: 50px;
border: 1px solid black;
display: table;
text-align: center;
}
.container span {
display: table-cell;
vertical-align: middle;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21577730
复制相关文章
相似问题