div内的垂直对齐跨度

Question

http://jsfiddle.net/UmHNL/2/

<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和旧版浏览器.

谢谢

Answer 1

你应该试试这个:

.container {
    width: 100%;
    height: 50px;
    border: 1px solid black;
    display: table;
    text-align: center;
}

.container span {
    display: table-cell;
    vertical-align: middle;
}

Answer 2

将 CSS 更新为

.container {
  width: 100%;
  height: 50px;
  display: table-cell;
  border: 1px solid black;
  text-align: center;
  vertical-align: middle;
}

.container span {
}