zoukankan      html  css  js  c++  java
  • 【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{
      100px;
      height:60px;
      line-height:60px;
      background:red;
      display:inline-block;
      text-align:center;
    }

    效果图 : 

  • 相关阅读:
    第四章5
    第四章4
    第四章3
    第四章2
    第四章1
    第四章例4-8
    第四章例4-7
    第四章例4-6
    第四章例4-5
    第四章例4-4
  • 原文地址:https://www.cnblogs.com/500m/p/13953800.html
Copyright © 2011-2022 走看看