Vertical aligning text in a div

Question

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

the parent should be `display: table` and the immediate child the `display: table-cell`. You have the child inside other parents... — jackJoe, Nov 03 '14 at 09:38
http://stackoverflow.com/questions/2939914/vertically-align-text-in-a-div?rq=1 — Demian Kasier, Nov 03 '14 at 10:26

Toni Michel Caubet · Answer 1 · 2014-11-03T09:55:34.800

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

score 1 · Answer 2 · answered Nov 03 '14 at 09:39

1

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

answered Nov 03 '14 at 09:39

Refilon

3,334
1
27
51

score 0 · Answer 3 · answered Nov 03 '14 at 09:39

0

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.

answered Nov 03 '14 at 09:39

codingrose

15,563
11
39
58

score 0 · Answer 4 · answered Nov 03 '14 at 09:51

0

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/

answered Nov 03 '14 at 09:51

kaaai3

39
5

1

Yes, but this fails (very hard) if content uses two lines – Toni Michel Caubet Nov 03 '14 at 09:52
true but for 1 line it is very usefull – kaaai3 Nov 03 '14 at 09:53
True, I guess. If you check out my answer, you might find a more flexible solution.. cheers! (edit: by the way, you don't need that `display:table` to vertically align using `line-height`) – Toni Michel Caubet Nov 03 '14 at 09:54

Vertical aligning text in a div

4 Answers4