Question

我正在使用标准网格系统处理响应式网站，因此我的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/

Answer 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/

在没有固定高度的情况下保持行高度垂直居中

1 个答案: