如何将导航栏移动到水平中心？答案

【问题标题】：How to move navigation bar to the horizontal center?如何将导航栏移动到水平中心？
【发布时间】：2017-02-18 23:44:54
【问题描述】：

我想把下面的导航栏移到水平中心，但是不知道怎么做！？有什么想法吗？

ul {
  list-style-type: none;
  padding-left: 350px;
  padding-top: 30px;
}

li a {
  display: block;
  color: #ffffff;
  padding: 10px 15px 10px 15px;
  text-decoration: none;
  font-size: 15px;
  border-left: 1px solid #FEDD19;
  float: left;
}

li a:hover {
  color: #000000;
  background-color: #FEDD19;
}

【问题讨论】：

欢迎来到 Stack Overflow！寻求代码帮助的问题必须包括在问题本身最好是在Stack Snippet 中重现它所需的最短代码。见How to create a Minimal, Complete, and Verifiable example
...但请尝试删除任何浮动。

标签： html css center positioning

【解决方案1】：

#nav ul {
    display: inline-block;
    list-style-type: none;
}

How to center a navigation bar with CSS or HTML?

【讨论】：

【解决方案2】：

将<ul> 包装成具有固定宽度的div 并将margin: 0px auto; 应用于该div。

body {
	background-color: black;
}
#nav {
	width: 440px;
	margin: 0px auto;
	border: 1px solid white;
}
.clear {
	clear: both;
}
ul {
	list-style-type: none;
	padding-top: 30px;
}

li a {
	display: block;
	color: #ffffff;
	padding: 10px 15px 10px 15px;
	text-decoration: none;
	font-size: 15px;
	border-left: 1px solid #FEDD19;
	float: left;
}

li a:hover {
	color: #000000;
	background-color: #FEDD19;
}

<div id="nav">
	<ul>
		<li><a href="#">Menu 1</a></li>
		<li><a href="#">Menu 2</a></li>
		<li><a href="#">Menu 3</a></li>
		<li><a href="#">Menu 4</a></li>
		<li><a href="#">Menu 5</a></li>
		<div class="clear"></div>
	</ul>
</div>

【讨论】：

【解决方案3】：

导航栏居中

.ul {
  display: -webkit-flex;
  display: flex;

  -webkit-justify-content: center;
  justify-content: center;		

  -webkit-align-items: center;
  align-items: center;

  width: 100%;
  height: auto;
  background-color: lightgrey;							
}

.li {
  background-color: cornflowerblue;
  padding: 0.5rem;
  margin: 0.5rem;							

  -webkit-align-self: center;							
  align-self: center;
}

a .li:hover {
  color: #000000;
  background-color: #FEDD19;
  cursor: pointer;
}

<div class="ul">
  <a><div class="li">1</div></a>
  <a><div class="li">2</div></a>
  <a><div class="li">3</div></a>  
  <a><div class="li">4</div></a>
  <a><div class="li">5</div></a>					
</div>

【讨论】：