Question

怎么在css中让导航条文字居中显示？

<div id="nav">
<ul>
<li><a harf="#">首页</a></li>
<li><a harf="#">首页1</a></li>
<li><a harf="#">首页2</a></li>
<li><a harf="#">首页3</a></li>
<li><a harf="#">首页4</a></li>
</ul>
</div>

Answer 1

<style type="text/css">

    *{

      margin:0;

      padding:0;

    }

    ul,li{

      list-style: none;

    }

    #nav{

      width:100%;

    }

    #nav>ul{

      width:80%;

      margin:0 auto;

    }

    #nav>ul>li{

      width:calc(20% - 20px);

      margin:0 10px;

      background-color: #ccc;

      float: left;

      text-align: center;

    }

  </style>

Answer 2

一般的文字居中，是使用text-align:center

使用的前提是：子元素必须为行元素（inline），或行内块元素（inline-block）

按照你提供的代码，如果想要ul在div中居中，那么只需如下修改：

<div id="nav" style="text-align:center">

<ul style="display:inline-block">

如上，“首页首页1首页2首页3首页4”，将在一行居中显示