在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導航欄

回答

相關問題