垂直对齐问题:中;

时间:2011-04-28 09:22:10

标签: css

div sub如何将div center设置为中间? 文本可以不同,因此在这种情况下边距或行高不是一个好的解决方案。

CSS:

.center {
    background-color: #336699;
    width: 200px;
    height: 200px;
}

.sub {
    display: inline-block;
    vertical-align: middle;
}

HTML:

<div class="center">
    <span class="sub">
        Some text text...
    </span>
</div>

1 个答案:

答案 0 :(得分:3)

可能的解决方案是:

HTML

<div class="center">
    <span class="sub">
        Some text text...<br />
        An some more text...
    </span>
</div>

CSS

.center
 {
     background-color: #336699;
     width: 200px;
     height: 200px;
     display: table;
 }

.sub
 {
     display: table-cell ;
     vertical-align: middle;
     text-align: center;
 }

如果需要,现场演示位于http://jsfiddle.net/vladsaling/6nTGF/