Question

尝试将div中的某些文本垂直对齐到中心，但我无法这样做。我已经尝试使用display方法作为表格和表格单元格，但这似乎不起作用。请帮忙。

HTML：

<div class="vc_row wpb_row vc_row-fluid blunetser-banner vc_custom_1415005990938">
<div class="vc_col-sm-12 wpb_column vc_column_container">
    <div class="wpb_wrapper">
        <div class="vc_row wpb_row vc_inner vc_row-fluid blunet-serv-banner-row">
            <div class="wpb_wrapper">
                <div class="wpb_text_column wpb_content_element ">
                    <div class="wpb_wrapper">
                        <p>Some text will go here</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

CSS：

.blunetser-banner {
display: table;
height: 300px;
background: #eee;
}
.blunet-serv-banner-row {
display: table-cell;
vertical-align: middle;
}

Answer 1

这是我对此问题最喜欢的解决方案（支持简单且非常好的浏览器）：

HTML

<div class="vcenter">
   <p>Text</p>
</div>

CSS

.vcenter{ //change this
    width: 300px; 
    height: 300px; 
}
.vcenter:before {
    content: " ";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.vcenter :first-child {
    display:inline-block;
    vertical-align:middle;
}

小提琴：http://jsfiddle.net/u5x7ta0w/2/

所以，对于你的情况：

.wpb_wrapper{
    width: 300px;
    height: 300px;
}
.wpb_wrapper:before {
    content: " ";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.wpb_wrapper :first-child {
    display:inline-block;
    vertical-align:middle;
}

Answer 2

我认为你在样式表中使用了错误的类名？

http://jsfiddle.net/f72ocv0x/5/

.wpb_text_column {
    display: table;
    height: 300px;
    background: #eee;
}
.wpb_wrapper {
    display: table-cell;
    vertical-align: middle;
}

Answer 3

由于.blunet-serv-banner-row不是.blunetser-banne的直接子项，因此它不会占用100％的高度。

应该是：

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

<强> See updated fiddle here.

Answer 4

你必须给div中的文本一个行高，如果你给div的行高300px它将在中间

.blunetser-banner {
display: table;
height: 300px;
background: #eee;
line-height: 300px;
}

行高需要与div的高度相同

http://jsfiddle.net/f72ocv0x/6/

垂直对齐div中的文本

4 个答案: