HTML：
<nav id="main_nav">
<ul>
<li><a href="index.html">Blog</a></li>
</ul>
</nav>
CSS：
#main_nav {
text-align:center;
width:50%;
padding-top: 35px;
}
为什么nav不在的header
不要给不需要的padding的margin调整HTML
这里是一个工作Demo
去除padding-topmargin等和补充：
header{
display: flex;
align-items: center;
overflow: scroll;
justify-content: center;
}
header h1{
min-width: 250px;
margin: 0;
}
#search_and_avatar{
flex: 1;
display: flex;
justify-content: flex-end;
}
body {
\t margin:0;
\t font-family: 'Source Sans Pro', sans-serif;
}
header {
\t background-color:#151515;
\t overflow:hidden;
\t height: 100px;
}
h1 {
\t color:#FFF;
\t font-family: "Arial Rounded MT", "Helvetica Rounded", Arial, sans-serif;
\t font-size: 40px;
\t font-weight: normal;
\t line-height:25px;
\t padding: 0px 20px;
}
header h1, img, #search_form {
\t float:left;
}
#main_nav a {
\t color:#FFF;
\t text-decoration:none;
}
#main_nav {
\t display: table;
\t text-align:center;
\t width:50%;
}
#main_nav ul {
\t display: table-row;
}
#main_nav ul li {
\t padding: 15px;
\t display: table-cell;
\t vertical-align: middle;
\t top: 50%;
\t display:inline;
}
header img {
\t width:35px;
}
header{
\t display: flex;
\t align-items: center;
\t overflow: scroll;
\t justify-content: center;
}
header h1{
\t flex: 1;
\t min-width: 250px;
\t margin: 0;
}
header form{
\t text-align: right;
}
#search_and_avatar{
\t flex: 1;
\t display: flex;
\t justify-content: flex-end;
}<div id="wrapper">
<header>
<h1>CSS-Tricks</h1>
<nav id="main_nav">
<ul>
<li><a href="index.html">Blog</a></li>
<li><a href="video_screencasts.html">Videos</a></li>
<li><a href="almanac.html">Almanac</a></li>
<li><a href="snippets.html">Snippets</a></li>
<li><a href="forums.html">Forums</a></li>
<li><a href="shop.html">Shop</a></li>
<li><a href="lodge.html">Lodge</a></li>
<li><a href="jobs.html">Jobs</a></li>
</ul>
</nav>
<div id="search_and_avatar">
<form action="index.html" method="post" id="search_form">
<input type="text" id="search" name="search">
</form>
<img src="images/avatar.png">
</div>
<!--
<ul id="account_nav">
<li><a href="login.html">Log In</a></li>
<li><a href="signup.html">Sign Up</a></li>
</ul>
-->
</header>
\t </div>#main_nav {
text-align:center;
width:50%;
padding-top: 35px;
margin:0px auto;
}
嗨，应用该改变之后，它是多一点点的，现在则中心，您可以检查更新的小提琴。你知道为什么吗？ –
默认情况下UL元素有一个填充船的负载，你是否删除它？ – jedifans
@jedifans我试着删除默认的填充。它仍然不是完美的中心。 –
中心对齐删除display: table;，并添加margin: 0 auto;您nav
#main_nav {
text-align: center;
width: 50%;
padding-top: 35px;
margin: 0 auto;
}
嗨，在你的小提琴中它不是完美的标题中心 –
删除显示：表行;在你的ul –
这没有帮助，我害怕。 –
虽然它并不完美。 –
@ Gray-lover已更新。不幸的是，'h1'有一些'padding-top' –
现在它比中心更加正确。顺便说一下，我在Chrome中查看。 –