0

我正在使用标准网格系统开发响应式网站，因此我的 div 不能具有固定高度。话虽如此，我已经设置了一个小提琴文件来模拟我的问题。出于美观原因，我在桌面上的最小高度为 50px，并将行高也设置为 50。因此文本在 div 中垂直居中。如果你让窗口更窄，这条线当然最终会断裂。有没有办法在内容中断后保持内容垂直居中，所以看起来很糟糕？

这是一些代码：

.box {
    width: 100%;
    min-height: 50px;
    line-height: 50px;
    font-size: 16px;
    color: #fff;
    background-color: #000;
    text-align: center;
}

这是小提琴文件：http: //jsfiddle.net/HFAew/

4

1 回答 1

1

你不能在 CSS 中垂直居中，但是你有一些针对不同情况的解决方法。在您的情况下，我建议使用 display: table; 在包装器中：http: //jsfiddle.net/HFAew/1/

<div class="verticalCentered">
    <div class="box"> test content test content test content test content</div>
</div>

CSS：

.verticalCentered {
    display: table;
    height: 100px; /*variable*/
    width: 100%;
}

.box {
    display: table-cell; /**/
    vertical-align: middle; /**/
    line-height: 50px;
    font-size: 16px;
    color: #fff;
    background-color: #000;
    text-align: center;
}

但请记住，它有时会出现问题。它仅在某些情况下有用。其他方式：http ://www.vanseodesign.com/css/vertical-centering/

于 2013-02-23T17:58:50.067 回答