Question

I want to center the text link in the div class .nav-tab I add padding:0 auto; but it not help allso I add text-align:center; and still it is not work.
thanks for any help.

jsFiddle Demo

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

​

    #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

First, understand that it’s not valid to define padding: 0 auto; — auto isn’t an acceptable value for padding. Adding text-align: center; to .nav-tab really seems to fix the issue: little link.