在Div中居中水平的UL导航栏

我知道这个问题已经问过，但经过几个小时的搜索后，我仍然无法让我的导航栏居中。我仍然对此感到陌生，但我认为这与我制作导航栏的方式有关，因为我在其他项目上遇到同样的问题。显示的代码是用于顶栏的，但我在下栏也有问题。 here是该网站。在Div中居中水平的UL导航栏

这里是相关的代码。

#topbar { 
 
    width: 100%; 
 
    height: 140px; 
 
    background-color: #6d6e70; 
 
    text-align: center; 
 
    } 
 

 
    ul.nav1 { 
 
    list-style-type: none; 
 
    position: absolute; 
 
    width: 760px; 
 
    border: 3px solid red; 
 
    /*FIX CENTER IM LOSING MY MIND*/ 
 
    top: 35px; 
 
    } 
 

 
    li.hnav { 
 
    width: 150px; 
 
    height: 70px; 
 
    float: left; 
 
    display: inline; 
 
    } 
 

 
    a.hnav { 
 
    padding-top: 25px; 
 
    display: block; 
 
    text-decoration: none; 
 
    width: 150px; 
 
    height: 45px; 
 
    text-align: center; 
 
    border-radius: 10px; 
 
    transition: all .5s ease; 
 
    font-family: Walkway; 
 
    font-size: 20px; 
 
    font-weight: bold; 
 
    color: #fff; 
 
    } 
 

 
    a:hover { 
 
    background-color: #fff; 
 
    color: #6d6e70; 
 
    }

<div id="topbar"> 
 
    \t \t <img src="AandAlogoFINAL1.png" alt="A and A Logo" id="logo"> 
 
    \t \t 
 
    \t \t <ul class="nav1"> 
 
    \t \t \t <li class="hnav"><a href="index.html" class="hnav">Home</a></li> 
 
    \t \t \t <li class="hnav"><a href="about.html" class="hnav">About</a></li> 
 
    \t \t \t <li class="hnav"><a href="framing.html" class="hnav">Framing</a></li> 
 
    \t \t \t <li class="hnav"><a href="gallery.html" class="hnav">Gallery</a></li> 
 
    \t \t \t <li class="hnav"><a href="community.html" class="hnav">Community</a></li> 
 
    \t \t </ul> 
 
    \t \t 
 
    \t </div>

来源

2014-12-10 JBAG1602

位置ul.nav1比较，给它margin: 0 auto和height: 77px。

enter image description here

#topbar { 
 
    width: 100%; 
 
    height: 140px; 
 
    background-color: #6d6e70; 
 
    text-align: center; 
 
} 
 
ul.nav1 { 
 
    list-style-type: none; 
 
    position: relative; 
 
    width: 760px; 
 
    border: 3px solid red; 
 
    margin: 0 auto; 
 
    height: 77px; 
 
} 
 
li.hnav { 
 
    width: 150px; 
 
    height: 70px; 
 
    float: left; 
 
    display: inline; 
 
} 
 
a.hnav { 
 
    padding-top: 25px; 
 
    display: block; 
 
    text-decoration: none; 
 
    width: 150px; 
 
    height: 45px; 
 
    text-align: center; 
 
    border-radius: 10px; 
 
    transition: all .5s ease; 
 
    font-family: Walkway; 
 
    font-size: 20px; 
 
    font-weight: bold; 
 
    color: #fff; 
 
} 
 
a:hover { 
 
    background-color: #fff; 
 
    color: #6d6e70; 
 
}

<div id="topbar"> 
 
    <img src="AandAlogoFINAL1.png" alt="A and A Logo" id="logo"> 
 
    <ul class="nav1"> 
 
    <li class="hnav"><a href="index.html" class="hnav">Home</a> 
 
    </li> 
 
    <li class="hnav"><a href="about.html" class="hnav">About</a> 
 
    </li> 
 
    <li class="hnav"><a href="framing.html" class="hnav">Framing</a> 
 
    </li> 
 
    <li class="hnav"><a href="gallery.html" class="hnav">Gallery</a> 
 
    </li> 
 
    <li class="hnav"><a href="community.html" class="hnav">Community</a> 
 
    </li> 
 
    </ul> 
 

 
</div>

来源

2014-12-10 22:23:23

试试这个，方便快捷：

ul.nav1 { 
    list-style-type: none; 
    border: 3px solid red; 
    width: 760px; 
    display: inline-block; 
    margin: 35px auto; 
}

我访问您的网站并验证它工作在页面上。

enter image description here

来源

2014-12-10 22:23:33 mikelt21

我爱你很多...为什么这样做？ – JBAG1602 2014-12-10 23:05:16

'display：inline-block'使容器缩小以适合其内容。 '边距：35px auto;'表示顶部和底部边距厚度为35像素，左侧和右侧边距自动计算。由于左右边距都设置为“auto”，因此渲染引擎会尝试使它们相等，从而居中导航栏。 – mikelt21 2014-12-10 23:17:33

删除位置：从您的UL绝对的，只是添加：

.nav1{ 
    display: inline-block; 
}

然后添加你的UL边距。

来源

2014-12-10 22:24:14

在Div中居中水平的UL导航栏

回答

相关问题