2016-02-04 43 views
1

我有這個頁面:如何對齊中心這個菜單CSS

link

我建這個菜單CSS代碼如下...

CODE CSS:

.wrapper .content .content-menu { 
    width: 91%; 
    /*background: #5B626A;*/ 
    position:fixed; 
    z-index:9999; 
    left: 4%; 
    margin: 0 auto; 
} 

代碼HTML:

<div class="content-menu"> 
        <div class="navbar navbar-inverse bs-docs-nav" role="banner"> 
         <div class="navbar-header"> 
          //Some CODE HTML 
         </div> 
        </div> 
</div> 

該網站上顯示的最佳的HTML代碼......你能告訴我如何使這個菜單總是在中心? 我做了一個屏幕打印,以更清楚地瞭解他們想要什麼。

enter image description here

+1

不能鎖定其位置爲「固定」,然後期望利潤或其他任何工作。 – durbnpoisn

+1

看着這個,你已經包含了這個元素的錯誤的CSS。你應該專注於UL塊。 – durbnpoisn

+0

你想在垂直線上方的頁面中間的標誌看到我的回答 – madalinivascu

回答

0

使用left: 50%; transform: translateX(-50%)使其居中靠固定的定位。 使用頁邊距的中心元素:0 auto用於頁面流中的元素不是固定位置,絕對定位或浮動元素

+0

你也可以簡單地將'width:50%'分配給'ul'。 – Krii

0

將左右菜單放置50%,將徽標放在寬度左邊並留有邊距左meniu一半+ marginto權

ul.lang-top.navbar-right { 
    width: 50%; 
    margin: 0; 
} 

ul.lang-top.navbar-right li:first-child > img { 
    width: 200px; 
    height: 130px; 
    margin-left: -67px; 
} 

.menu-menu-1-container { 
    display: inline-block; 
    width: 50%; 
} 

ul#menu-menu-1 { 
    float: right; 
    margin-right:90px; 
} 
0

這是你想達到什麼目的? enter image description here

我能做到的是通過使用此代碼:

.navbar-inverse .navbar-collapse { 
    text-align: center; 
} 
.menu-menu-1-container, .lang-top { 
    display: inline-block; 
} 
.navbar-nav { 
    margin: 0; 
    float: none; 
    text-align: center; 
} 
.navbar-nav > li { 
    float: none; 
    display: inline-block; 
} 
ul.lang-top.navbar-right { 
    float: none; 
    text-align: center; 
} 
.lang-top li { 
    float: none; 
    display: inline-block; 
    margin-left: 10px; 
} 

讓我知道,如果你仍然遇到任何問題