中心導航欄項目（鏈接和圖像）

所以我重新創建蘋果的網頁（不完全相同，但我正在採取他們的一些設計），我想中心導航欄項目。我試過使用文本對齊和對齊（中心），但它什麼都不做，我想這可能是因爲它是一個固定的欄，但我不會導致它不對齊到中心。中心導航欄項目（鏈接和圖像）

的jsfiddle：https://jsfiddle.net/wsjkkLpL/

<!DOCTYPE html>

<link rel="stylesheet" href="styles/main.css"> 
<meta charset="utf-8"> 
<title>Apple - iPhone</title>

<ul> 
    <img src="images/logo.png"> 
    <li><a href="#">iPhone</a></li> 
    <li><a href="#">Mac</a></li> 
    <li><a href="#">iPad</a></li> 
    <li><a href="#">iPod</a></li> 
</ul> 

<div id="ad"> 

    <center> 
    <h3 class="blackh1">iPhone</h3> 
    <h2 class="blackh1">This is 7.</h2> 
    <img src="images/iphone.jpg" class="iphoneimg"> 
    </center> 

</div> 
<div id="product-container"> 
    <div id="product" class="product2"> 

     <h1 class="whiteh1">iPhone</h1> 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p> 

    </div> 
    <div id="product" class="product1"> 

     <h1 class="blueh1">iPad</h1> 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p> 

    </div> 
</div> 
<div id="product-container2"> 

</div>

在此先感謝。

來源

2017-02-26 Oscar Arranz

的float: left上li是導致此。您可以使用：

display: inline-block - <li>旨意是「像對待文本」，所以text-align: center作品（https://jsfiddle.net/v7p9wjgt/）...
...或Flexbox的（https://jsfiddle.net/0krucs4w/），這可能是萬一方便你想改變在狹窄/移動屏幕上的佈局等。

來源

2017-02-26 20:37:16 helb

謝謝！ Flexbox爲我做了這個，因爲我要改變設備之間的佈局！ –

問題是您在<li>元素上使用float: left。將其交換至display: inline-block，然後在<ul>上設置text-align: center。您還需要一個<li>塊本身內的圖像移動到：

<li><img src="images/logo.png"></li> 

ul { 
    text-align: center; 
} 

li { 
    display: inline-block; 
}

我創建了一個工作示例here。

希望這會有所幫助！ :)

來源

2017-02-26 20:35:46

您只需將ul text-align：center，然後從li刪除左浮動，並用display：inline-block替換它。

更新小提琴：https://jsfiddle.net/wsjkkLpL/1/

如果你想要的東西垂直對齊，浮動左/右是行不通的。

延伸閱讀：https://www.w3schools.com/css/css_navbar.asp

ul { 
list-style-type: none; 
background-color: rgba(10,10,10,0.85); 
position: fixed; 
width: 100%; 
text-align: center; 
} 

li { 
    display: inline-block; 
}

來源

2017-02-26 20:36:10

中心導航欄項目（鏈接和圖像）

回答

相關問題