頁面中心的定位表

似乎有一個簡單的解決方法，但我無法弄清楚，更不用說找到答案，所以我會問。我所要做的就是讓頁面上水平居中的菜單「.nav」。問題是，我想要左側的標誌，它似乎與我集中導航導致混亂。頁面中心的定位表

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body { 
 
    background: url("http://i.imgur.com/4QGL09u.jpg") no-repeat center center fixed; 
 
    -wekit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
} 
 
#top { 
 
    width: 100%; 
 
    background-color: rgb(000, 255, 000); 
 
} 
 
#logo { 
 
    float: left; 
 
    margin-left: 20px; 
 
    background-color: rgb(255, 000, 000); 
 
} 
 
.nav { 
 
    width: 200px; 
 
    display: table; 
 
    margin: auto; 
 
} 
 
.item { 
 
    display: table-cell; 
 
    padding: 10px; 
 
}

<html> 
 

 
<body> 
 
    <header> 
 
    <div id="top"> 
 
     <img src="http://i.imgur.com/adZJ4Ln.png" alt="logo" id="logo"> 
 
     <ul class="nav"> 
 
     <li class="item">Home</li> 
 
     <li class="item">Projects</li> 
 
     <li class="item">Images</li> 
 
     <li class="item">More</li> 
 
     </ul> 
 
    </div> 
 
    </header> 
 
</body> 
 

 
</html>

來源

2016-10-10 Yama

你說的表，但你有一個菜單。也請搜索，這已被詢問並回答很多次 – pol

我已經搜索了答案，並沒有一個適用於我在這裏試圖做的。他們都表示「保證金：汽車」或類似的答案。 – Yama

這不是它的菜單，所以請提供jfiddle –

是這樣輸出rü期待

檢查輸出jsbin

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body { 
 
    background: url("http://i.imgur.com/4QGL09u.jpg") no-repeat center center fixed; 
 
    -wekit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
} 
 
#top { 
 
    width: 100%; 
 
    background-color: rgb(000, 255, 000); 
 
} 
 
#logo { 
 
    float: left; 
 
    margin-left: 20px; 
 
    background-color: rgb(255, 000, 000); 
 
} 
 
.nav { 
 
    width: 200px; 
 
    margin: 0 auto; 
 
} 
 
.item { 
 
    display: table-cell; 
 
    padding: 10px; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 

 
<body> 
 
    <header> 
 
    <div id="top"> 
 
     <img src="http://i.imgur.com/adZJ4Ln.png" alt="logo" id="logo"> 
 
     <ul class="nav"> 
 
     <li class="item">Home</li> 
 
     <li class="item">Projects</li> 
 
     <li class="item">Images</li> 
 
     <li class="item">More</li> 
 
     </ul> 
 
    </div> 
 
    </header> 
 
</body> 
 

 
</html>

來源

2016-10-10 15:45:22

這工作，你到底做了什麼改變它？我已嘗試保證金：0汽車，但它沒有工作時，我第一次嘗試。 – Yama

我剛剛刪除顯示：表屬性和添加的邊距：0自動; –

我不知道爲什麼顯示：表是罪魁禍首。無論如何，謝謝你的幫助！ – Yama

頁面中心的定位表

回答

相關問題