Question

我想将文本链接置于div类.nav-tab的中心位置我添加padding:0 auto;但是它无助于我添加text-align:center;但仍然不起作用。谢谢你的帮助。

<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

只需添加：

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

它有效。

如何在div上标记文本？

3 个答案: