【问题标题】:CSS: Center AlignCSS:居中对齐
【发布时间】:2012-03-21 06:40:59
【问题描述】:

我有以下带有float:left; 的 CSS 菜单,我该如何制作这个中心。在哪里添加margin:0 auto

CSS:

/* === 7. Navigation === */

#nav{
    width:100%;
    margin:30px auto;
}

.ie7 #nav{
    padding:10px 0 0 30px;
}

#nav ul li{
    margin:0 auto;
}

#nav li{
    float:left;
    text-align:center;
    list-style:none;
    font-weight:bold;
}
#nav li a{
    margin-right:30px;
    text-decoration:none;
    color:#5d5e5d;
}

#nav li a:hover{
    text-decoration:underline;

}

#nav li a:active{
    font-family:inherit;
    font-size:inherit;
    color:#fff;
}

HTML:

  <ul id="nav"><!--Navigation-->
                    <li id="homenav"><a href="#home">Home</a></li>
                    <li id="portfolionav"><a href="#portfolio">Portfolio</a></li>
                    <li id="contactnav"><a href="#contact">Contact</a></li>
   </ul>

【问题讨论】:

    标签: css menu alignment


    【解决方案1】:

    如果您没有指定宽度来使菜单居中,您只需将列表项声明为 display:inline-block 而不是 float:left 并将 text-align 属性设置为居中,如下所示:

    CSS

    #nav > li {
        display:inline-block;
        *display:inline; /* ie7 fix */
        zoom:1; /* hasLayout ie7 trigger */
        list-style:none;
        font-weight:bold;
    }
    
    #nav {
        text-align:center;
    }
    

    这样,无论宽度如何,您的菜单都会居中。

    【讨论】:

      【解决方案2】:

      将您的#nav 的显示属性添加为左右自动的表格和边距。

      #nav{
          display:table;
          margin-left:auto;
          margin-right:auto;
       }
      

      【讨论】:

      • display: table; 在旧版本的 IE 中会失败。而且margin-left:auto; margin-right:auto;和OP的简写margin: 30px auto;差别不大
      【解决方案3】:

      首先,您的#nav 元素的宽度必须小于 100%。然后添加“margin:0 auto”,它应该居中。

      【讨论】:

      • #nav 元素实际上需要固定宽度才能使其正常工作。
      • 对,我就是这个意思。将 width:100% 更改为 width:500px 或任何适合您的情况。
      【解决方案4】:

      看看this的文章。当我遇到居中问题时,它对我有用。它还可以跨浏览器兼容。

      【讨论】:

        【解决方案5】:

        #nav {...}; 内。请注意,您的导航需要固定宽度才能使其正常工作。

        【讨论】:

          猜你喜欢
          • 2020-07-27
          • 1970-01-01
          • 2017-11-23
          • 2017-12-17
          • 1970-01-01
          • 2013-05-25
          • 1970-01-01
          • 1970-01-01
          • 2017-05-15
          相关资源
          最近更新 更多