How to center text in a div vertically?

Question

I've centered my text in my div but I've only managed to center it horizontally by using text-align: center However I'm having trouble centering the text vertically. I've tried using vertical-align: middle; but it didn't work

Here is a codepen: http://codepen.io/anon/pen/Ioiaq

the code with the text is right at the bottom of the html panel the text is "INFO"

and here's the code so far:

<div id="inf" style="
                     text-align:center;  
                     background-color: white; 
                     position: absolute; top:50%; left: 45%; width: 10%; height: 6%; 
                     z-index: 10;  
                     display: inline-block;">

  <a href="#"><span>INFO</span></a>
  </div>

any ideas?

I don't mind what code is used to fix the alignment it doesn't have to be css.

Using only CSS you could use the right combination of height and padding. Otherwise it's a JS job. — Raul Leaño Martinet, May 19 '14 at 00:38
This person also had trouble with it, it'll still work though: http://stackoverflow.com/questions/2939914/vertically-align-text-in-a-div — Tosfera, May 19 '14 at 00:39

score 1 · Answer 1 · answered May 19 '14 at 00:42

1

To center a single line vertically, you can use CSS line-height whith the same value as the height value you are using.

answered May 19 '14 at 00:42

tomasofen

1,330
2
12
16

score 1 · Answer 2 · answered May 19 '14 at 00:45

1

line-height with a vertical-align: middle; is probably the best way to go if you aren't using JS.

FIDDLE

HTML:

<div id="inf">
    <a href="#"><span>INFO</span></a>
</div>

CSS:

#inf { 
    text-align:center;  
    background-color: white; 
    z-index: 10;  
    display: inline-block;
    width: 100%;
    line-height: 400px;
    vertical-align: middle;
}

answered May 19 '14 at 00:45

stevenspiel

5,775
13
60
89

I don't mind if JS is used to achieve what I'm looking for :-) – Chris Lad May 19 '14 at 00:56
JS is nice, but as a general rule i would try to stick to CSS for layout ;) I think that mr.musicman example should work for you. – tomasofen May 19 '14 at 23:35

score 0 · Answer 3 · answered May 19 '14 at 00:43

0

You could use the CSS property vertical-align.

vertical-align: middle;

answered May 19 '14 at 00:43

Chad

164
10

How to center text in a div vertically?

3 Answers3