html - 如何将文本标签居中放在div上？

Question

我想在.nav-tab我添加的 div 类中居中文本链接，padding:0 auto;但它无济于事，所以我添加text-align:center;了它仍然不起作用。谢谢你的帮助。

jsFiddle 演示

<nav id="main-nav-wrap">
<ul id="main-nav">
    <li class="">
        <div class="inner">
          <div class="nav-tab">

           <a href="/"> Home </a>
          </div>
             <div class="tooltip">
             </div>
        </div>
    </li>
            <li class="">
        <div class="inner">
            <div class="nav-tab">
            <a href="/"> abput</a>
            </div>
             <div class="tooltip">
             </div>
             </div>
    </li>
             <li class="">
        <div class="inner">
            <div class="nav-tab">
            <a href="/"> contact</a>
            </div>
             <div class="tooltip">
             </div> </div>
    </li>
        </ul>

​</p>

    #main-nav-wrap {
    width:200px;
    height:60px;

    margin:50px 0 0 10px;
    padding:0;
    border:1px solid red;
}
#main-nav{
    width:196px;
    height:60px;
    top:50px;
    margin:0 ;
    padding:0;
    border:1px solid blue;
}
.inner{
    width:63px;
    height:58px;
      border:1px solid green;
    float:left;
}

.nav-tab{
     width:50px;
    height:58px;
    background-color: #BF87D1;
    margin:0 auto;
   }
.nav-tab a{
    vertical-align:-18px;

}
​

Answer 1

只需添加：

.nav-tab {
    text-align: center;
}

Answer 2

首先，了解定义padding: 0 auto;-auto是无效的，这不是padding. 添加text-align: center;到.nav-tab似乎真的解决了这个问题：little link。

Answer 3

我刚试过这个：

.nav-tab {
    background-color: #BF87D1;
    height: 58px;
    margin: 0 auto;
    text-align: center; /* HERE */
    width: 50px;
}

它奏效了。