如何在div中垂直居中放置文本？

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.

Answer 1

要使单条线垂直居中，可以使用CSS line-height，该值与您使用的高度值相同。

Answer 2

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

Answer 3

您可以使用CSS属性vertical-align。

vertical-align: middle;