CSS：在導航欄中居中一個div

-1

我有奇怪的問題居中在另一個div內的div。我試圖做一個導航欄，這裏是HTML：CSS：在導航欄中居中一個div

<body> 
    <div class="nav"> 
     <div class="navbar"> 
      <ul> 
       <li><a href="#">Home</a></li> 
       <li><a href="#">Our Story</a></li> 
       <li><a href="#">Gallery</a></li> 
       <li><a href="#">Our Future</a></li> 
       <li><a href="#" class="right">Join us</a></li> 
       <li><a href="#" class="right">Contact</a></li> 
      </ul> 
     </div> 
    </div>

和相應的CSS：

.nav{ 
width:100%; 
} 
.navbar { 
width:75%; 
height:50px; 
margin: 0 auto; 
background-color:#E64888; 
position:fixed; 
}

所以這並不能在任何瀏覽器中我的鉻，火狐的工作，即...酒吧就坐在最左邊。我也嘗試了「margin-left：auto; margin-right：auto」方法，但仍然無法使用。這真的很煩人，因爲我不能確定哪裏出了問題。提前致謝。

來源

2014-06-19 Austin at CA

如果要在主nav ul爲中心，你需要設置它的父（在這種情況下html和body）具有寬度。否則，您必須處理li s上的尺寸和佈局（display）類型和ul li元素上的list-style-type（因此您看不到這些點）。

還有對ul的填充（這是空間的li s到當它是一個正常的列表右側），你必須處理，否則會出現遠右側（與「非中心化」）。

body, html { 
    width: 100%; 
    margin: 0; 
    padding: 0; 
} 
.nav { 
    width: 100%; 
} 
.navbar ul { 
    width: 75%; 
    height: 50px; 
    margin: 0 auto; 
    padding: 0; 
    background-color: #E64888; 
    list-style-type: none; 
    text-align: center; 
} 
.navbar ul li { 
    display: inline; 
    padding: 0; 
    margin: 0; 
}

http://jsfiddle.net/97B52/

來源

2014-06-19 23:38:23

嘗試：（據我理解你的問題）：

.nav li {list-style: none; display: inline-block; }

Working Fiddle

來源

2014-06-19 23:37:58 Jatin

如果你看，它實際上沒有在任何的'ul'或'ul'內'li's中心。 –

CSS：在導航欄中居中一個div

回答

相關問題