【css】 text-align 居中导航

原理 ：利用 inline-block 将 导航 作为 文本 ， 被外层具有 text-align 属性的导航盒子包含 。从而实现居中效果 

1.  html 结构 

<header>
  <div class="nav-wrap">
    <nav>hello</nav>
  </div>
</header>

 

2. css 结构 

body{
  margin:0;
}
header{
  height:60px;
  background:teal;
}
.nav-wrap{
  text-align:center;
}
nav{
  width:100px;
  height:60px;
  line-height:60px;
  background:red;
  display:inline-block;
  text-align:center;
}

 

效果图 :