div 内的垂直对齐范围[重复]

http://jsfiddle.net/UmHNL/2/ 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>

这个解决方案非常有效，直到屏幕宽度太小 - 将我的文本分成几行。

当我用 google 搜索这个问题时，我发现了很多疯狂的过于复杂的解决方案，使用 javascript 和 div 将我的内容推送到位。任何人都可以帮助我在不添加更多标记的情况下完成这项工作吗？ :)

无需支持 Internet Explorer 和较旧的浏览器。

Thanks

你应该尝试这个：

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

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