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 {
}

div内的垂直对齐跨度

2 个答案: