JavaEar 专注于收集分享传播有价值的技术资料

Vertical aligning text in a div

Am trying vertical align some text within a div to the center but I am unable to do so. I've tried using the display method to be table and table cell but this doesn't seem to work. Please help.

Fiddle

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;
}

4个回答

    最佳答案
  1. This is my favorite solution for this issue (simple and very well browser supported):

    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;
    }
    

    Fiddle: http://jsfiddle.net/u5x7ta0w/2/

    So, for your case:

    .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;
    }
    
  2. 参考答案2
  3. I think you used the wrong class names in your stylesheet?

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

    .wpb_text_column {
        display: table;
        height: 300px;
        background: #eee;
    }
    .wpb_wrapper {
        display: table-cell;
        vertical-align: middle;
    }
    
  4. 参考答案3
  5. Because .blunet-serv-banner-row is not the direct child of .blunetser-banne, it doesn't take up 100% height.

    It should be :

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

    See updated fiddle here.

  6. 参考答案4
  7. you have to give the div with the text in it a line-height if u give the div the line height 300px it will be in the middle

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

    line-height needs to be the same as the height of the div

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