CODEWITHSUNDEEP
htmlcss
user38208
user38208

Reputation: 1094

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

Upvotes: 2

Views: 402

Answers (4)

Toni Michel Caubet
Toni Michel Caubet

Reputation: 20183

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

Upvotes: 2

kaaai3
kaaai3

Reputation: 39

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/

Upvotes: 0

Refilon
Refilon

Reputation: 3499

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

Upvotes: 1

codingrose
codingrose

Reputation: 15709

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.

Upvotes: 0

Related Questions