Question

我的文字集中在div，但我只是设法使用text-align: center水平居中但是，我无法垂直居中文本。我尝试使用vertical-align: middle;，但它没有工作

这是一个codepen：http://codepen.io/anon/pen/Ioiaq

带有文本的代码位于html面板底部，文本为＆＃34; INFO＆＃34;

以及目前为止的代码：

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

任何想法？

我不介意用什么代码来修复它不一定是css的对齐方式。

Answer 1

要垂直居中一行，您可以使用CSS line-height，其值与您正在使用的高度值相同。

Answer 2

如果您没有使用JS，带有line-height的{p> vertical-align: middle;可能是最好的方法。

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;

如何垂直居中div中的文本？

3 个答案: