居中我的導航欄我已經嘗試了所有的東西

Question

好吧，所以我想爲我的導航欄中的客戶網站嘗試一種有點不同的技術，我完全難以理解爲什麼它不會居中。我也希望它縮小頁面的大小。我通常使ul寬度= 100％，但是當我這樣做時，它會使我的鏈接轉到下一行，而沒有後面的圖像。我的想法是修正這個問題，這樣當人們瀏覽頁面時，它就會一直存在。

HTML

<div class="menu_wrap"> 
<div class="menu_links"> 
    <ul> 
    <li><a class="first" href="home.html">Home</a></li> 
    <li><a href="about.html">About Us</a></li> 
    <li><a href="start.html">Getting Started</a></li> 
    <li><a href="contact.html">Contact Us</a></li> 
    <li> 
     <n><img src="img/logobar.jpg" width="250" height="150"/></n> 
    </li> 
    <li><a href="faqs.html">FAQ's</a></li> 
    <li><a href="testimonials.html">Testimonials</a></li> 
    <li><a href="links.html">Links</a></li> 
    <li><a href="gallery.html">Gallery</a></li> 
    </ul> 
</div> 
</div> 

CSS

/* start of navbar */ 


    .menu_wrap { 
     float:left; 
     z-index: 60; 
     width: 100%; 
     height: 69px; 
     background-image: url(img/lw.jpg); 
     background-repeat:repeat; 
     box-shadow: 0px 2px 5px #000000; 
     position: fixed; 
     margin-top:40px; 
    } 

    .menu_links ul { 
     width: 100%; 
     height: 92px; 
     list-style: none; 
     box-shadow: 0px 2px 5px #000000; 
    } 
    .menu_links ul li { 
     display: inline; 
     float:left; 
     height: 92px; 
    } 
    .menu_links ul li n{ 
     font-family: "Brush Script MT"; 
     font-weight: normal; 
     font-size: 41px; 
     color: #FFF; 
     line-height: 1.2em; 
     letter-spacing: -.0.03em; 
     margin-top: -40px; 
     text-align:center; 
     text-decoration: none; 
     box-shadow: 0px 2px 5px #000000; 
     display: block; 
     border-right-width: 1px; 
     border-right-style: solid; 
     border-right-color:#000; 

    } 
    .menu_links ul li a { 
     float:left; 
     margin-top: 0px; 
     line-height: 70px; 
     padding-right: 20px; 
     padding-left: 20px; 
     color:#FFF; 
     font-weight:900; 
     font-size: 12px; 
     text-decoration: none; 
     text-shadow: -1px -1px 1px #333; 
     border-right-width: 1px; 
     border-right-style: solid; 
     border-right-color:#000; 
     display:inline-block; 
    } 


    .menu_links ul li a:hover { 
     color:#CCC; 
     text-shadow: -1px -1px 1px #EEE; 
     background-image: url(img/navbar.png); 
     background-position: center; 

    } 
    .menu_buttons { 
     float:right; 
     line-height: 50px; 
     height: 50px; 
     margin-right: 30px; 
    } 
    .menu_buttons ul { 
     margin: 0px; 
     padding: 0px; 
     list-style-type: none; 
    } 
    .menu_buttons ul li { 
     display: inline; 
     height: 50px; 
    } 
    .menu_buttons ul li a { 
     float:left; 
     padding-right: 10px; 
     display: block; 
     border:none; 
     line-height: 50px; 
     padding-left: 10px; 
     height: 50px; 
     padding-top: 10px; 
     } 

    .first { 
     border-left-width: 1px; 
     border-left-style: solid; 
     border-left-color:#000; 
    } 

    .menu_links { 
     height: 50px; 
     float: left; 
     margin-left: 0px; 
    } 
    /*end of navbar */ 

我會給你一個鏈接的網頁，但它在Dreamweaver正在做的，是沒有起來。 logobar.jpg是網頁的標誌。我喜歡它的外觀，但它需要居中，而不是在我縮小屏幕尺寸時切斷或帶到下一行。

事情我已經試過是

浮動：左，右，沒有上幾乎所有的類 文本對齊的：在HTML端上的每個類 中心我已經試過ALIGN =每類中心 顯示：內聯，內聯塊在ul和li類

不，我實際上並沒有把float：right，left，none。我做了他們一個接一個，用float：right ;.向左飄浮;。然後float：none ;.

謝謝你的幫助！

Answer 1

一個很好的方式，以中心網頁上的元素是使用：

margin:0 auto;

上你想要的元素居中。例如：

HTML：

<div id="wrap"> 
    <ul> 
     <!-- *list items here* --> 
    </ul> 
</div> 

CSS：

#wrap { 
    width:100%; 
} 

#wrap ul { 
    width:960px; /* or however wide you'd like your menu */ 
    margin:0 auto; 
} 

我成立了一個小提琴在http://jsfiddle.net/m65rr/證明。希望這可以幫助。

Answer 2

浮動的容器不會很容易居中。每當我面對任何漂浮的容器水平居中，我使用以下。嘗試包裝你的標記;這些（這需要爲中心div.menu_links你的情況）：

<div class="center_outer"> 
    <div class="center_inner"> 
     <!-- Put your contents here (which needs to be centered) --> 
    </div> 
</div> 

CSS：

.center_outer 
{ 
    position: relative; 
    left: 50%; 
    float: left; 
} 
.center_inner 
{ 
    position: relative; 
    left: -50%; 
}