Center text vertically in a div?

Question

I just cannot seem to center text vertically in the center of my div.It keeps floating at the top. Here is my code: CSS

.dialer{
background-image: url('http://v4m.mobi/php/fb/images/close.png'); 
background-repeat: none;  
width: 100; 
height: 40; 
margin: 0 auto;
-moz-box-shadow: 0 12px 8px -8px rgba(0,0,0,0.7);
-webkit-box-shadow: 0 12px 8px -8px rgba(0,0,0,0.7);
box-shadow: 0 12px 8px -8px rgba(0,0,0,0.7);
text-align: center;
}

HTML

<div class="dialer" align="center"><a href="http://v4m.mobi/php/fb/index.php"   
style="color: #ffffff; font-size: 18px; font-weight: bold; text-decoration: none; 
margin-top: 20px;">Close App</a></div>

Any suggestions?

Thank you

You have `width: 100; height: 40;` you need some units here. px, em, % etc. — Kyle, Apr 24 '12 at 14:00
possible duplicate of [How do I center text vertically with css](http://stackoverflow.com/questions/8714371/how-do-i-center-text-vertically-with-css) and many others. — Mr Lister, Apr 24 '12 at 14:44
possible duplicate of [How to align text vertically center in div with css?](http://stackoverflow.com/questions/8865458/how-to-align-text-vertically-center-in-div-with-css) — user, Mar 07 '14 at 20:54

score 2 · Accepted Answer · answered Apr 24 '12 at 14:39

2

Try this

http://css-tricks.com/vertically-center-multi-lined-text/

answered Apr 24 '12 at 14:39

Sujith Kumar KS

1,043
12
23

score 1 · Answer 2 · answered Apr 24 '12 at 13:59

1

Add vertical-align: middle; to .dialer.

You could also do margin: auto auto; as you have fixed values for your height and width. You'd need to specify a 'type' of value, though, such as px, %, or whatever suits your purposes.

You could also do relative positioning like this:

.dialer {
    ...
    position: relative;
    top: 47%;
}

answered Apr 24 '12 at 13:59

Elliot Bonneville

51,872
23
96
123

This is the only cross browser multiline solution in CSS only. – Nick McCormack Apr 24 '12 at 14:59
Thank you for your answer, tried everything you mentioned above, but it does not work. any other suggestions? – DextrousDave Apr 24 '12 at 16:36

score 1 · Answer 3 · answered Apr 24 '12 at 14:02

1

Remove the "margin-top: 20px" from the a tag, and then use something like:

.dialer {
    ...
    height: 40px;
}

.dialer a {
    line-height: 40px;
}

...but this only works if you know the text will fit on one line.

answered Apr 24 '12 at 14:02

claesv

2,075
13
28

Thanks. this worked. But it seems like a non-official fix, one you wouldn't see on w3schools.com... why doesn't any of the other fixes, like vertical align:middle work? I added 'px' to my width and height and added vertical-align:middle, but no luck – DextrousDave Apr 24 '12 at 16:48

ThdK · Answer 4 · 2012-05-09T19:30:37.333

0

Here's a working Fiddle: http://jsfiddle.net/PvVr6/4/ I've updated the fiddle so it will work with multiline content also.

.dialer{
       ... 
       width: 100px;
       height: 40px;
       ...
       vertical-align: middle;
    }

    .dialer a {
        display: inline-block;  
    }

edited May 09 '12 at 19:30

answered Apr 24 '12 at 14:10

ThdK

9,916
23
74
101

check the update: display: inline-block; instead of line-height – ThdK Apr 24 '12 at 14:57
Thank you for your answer. tried it, does not work for me... As you can see in JSfiddle, it throws the text to the bottom of the div, not the vertical middle – DextrousDave Apr 24 '12 at 16:41

Center text vertically in a div?

4 Answers4