页面中心的定位表

似乎有一个简单的解决方法，但我无法弄清楚，更不用说找到答案，所以我会问。我所要做的就是让页面上水平居中的菜单“.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

页面中心的定位表

回答

相关问题