怎么用CSS把网页导航条文字居中？

html-css011

怎么用CSS把网页导航条文字居中？,第1张

文字居中用到css2.0中的text-align属性；

text-align属性是针对文字的对齐方式；

其中值包括：left(向左对齐) center（居中） right（右对齐） justify（两端对齐） inherit（默认对齐方式）

在这里我们将用到：text-align:center属性

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

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的<style>标签中，输入css代码：span {position: absolutetop: 45pxleft: 180px}。

3、浏览器运行index.html页面，此时成功通过css设置了文字在图片上面居中显示。