为什么nav不在标题的中心对齐？

Question

请查看此fiddle

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

的中心对齐

Answer 1

#main_nav {
    text-align:center;
    width:50%;
    padding-top: 35px;
    margin:0px auto;
}

Answer 2

不要让不需要的margin padding来调整您的HTML

这是一个有效的Demo

已移除padding-top margin等已添加

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; 
}

＆＃13;

＆＃13;

body {
	margin:0;
	font-family: 'Source Sans Pro', sans-serif;
}

header {
	background-color:#151515;
	overflow:hidden;
	height: 100px;
}

h1 {
	color:#FFF;
	font-family: "Arial Rounded MT", "Helvetica Rounded", Arial, sans-serif;
	font-size: 40px;
	font-weight: normal;
	line-height:25px;
	padding: 0px 20px;
}

header h1, img, #search_form {
	float:left;
}

#main_nav a {
	color:#FFF;
	text-decoration:none;
}

#main_nav {
	display: table;
	text-align:center;
	width:50%;
}

#main_nav ul {
	display: table-row;
}

#main_nav ul li {
	padding: 15px;
	display: table-cell;
	vertical-align: middle;
	top: 50%;
	display:inline;
}

header img {
	width:35px;
}

header{
	display: flex;
	align-items: center;
	overflow: scroll;
	justify-content: center;
}
header h1{
	flex: 1;
	min-width: 250px;
	margin: 0;
}
header form{
	text-align: right;
}

#search_and_avatar{
	flex: 1;
	display: flex;
	justify-content: flex-end;
}

＆＃13;

<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>
	</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

删除display: table;并将margin: 0 auto;添加到nav

#main_nav {
    text-align: center;
    width: 50%;
    padding-top: 35px;
    margin: 0 auto;
}

选中此Example fiddle