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と、問題が解決するようです：小さなリンク。

Answer 3

私はこれを試しました：

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

そしてそれはうまくいった。