html - div 内的垂直对齐跨度

标签 html css

<分区>

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

谢谢

最佳答案

你应该试试这个:

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

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

关于html - div 内的垂直对齐跨度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21577730/

相关文章:

html - 我如何制作一堆粘在其父 div 底部的 div?

html - css 下拉列表对齐 img 和文本

html: "-"和空格一样""?

javascript - 内联 Javascript 单击功能,用于在 chrome 扩展中动态添加具有动态 id 的元素

jquery group 每 3rd div

jquery - Bootstrap 导航选项卡最后一个元素的错误

ASP.NET Head sections 没有被修改?

javascript - location.replace 和 base 标签 : strange behavior in IE

html - 内联 block 表单元素在应用填充时换行并且之间存在空格

html - 我的列表元素之一的位置低于其余元素,即使它们都具有相同的高度