在主容器中居中导航答案

【问题标题】：Centering nav within main container在主容器中居中导航
【发布时间】：2015-10-29 06:51:41
【问题描述】：

我正在尝试在主容器 div 中居中导航标签，但右侧似乎有太多空间。我在子元素上尝试了 margin: 0 auto 方法以及 display: inline/inline-block 和 text-align - 但它不起作用。

body {
  background: #000;
}

.main-container {
  margin: 0 auto;
  width: 90%;
  overflow: hidden;
  background: #fff;
}

.main-container nav {
  width: 100%;
  display: block;
  margin: 10px 0;
}
.main-container nav ul {
  list-style-type: none;
}

.main-container nav ul li {
  width: 48%; 
  display: block;
  float: left;
  height: 300px;
  margin: auto auto 10px 10px;
}

.main-container nav ul li.one {
  background: url('http://media.npr.org/images/picture-show-flickr-promo.jpg');
  background-size: cover;
  overflow: hidden;
}

a {
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  text-align: center;
}

 a span {
   position: relative;
   top: 40%;
   font-size: 2em;
   z-index: 1000;
}

 <div class="main-container">
      <nav>
        <ul>
    	  <li class="fruits"><a href="one.html"><span> One </span></a></li>
    	  <li class="vegetables"><a href="two.html"><span> Two </span></a></li>
    	  <li class="carbohydrates"><a href="three.html"><span> Three </span></a></li>
    	  <li class="proteins"><a href="four.html"><span> Four </span></a></li>
    	  <li class="junk-food"><a href="five.html"><span> Five </span></a></li>
    	  <li class="health-tips"><a href="six.html"><span> Six </span></a></li>  
        </ul>
      </nav>
    </div>

【问题讨论】：

标签： html css

【解决方案1】：

你已经习惯了

.main-container nav ul{padding:0;}

或者以前总是css reset

Demo

【讨论】：

【解决方案2】：

问题： ul 元素默认具有 padding 和 margin。您必须将这些属性设置为 0。

Jsfiddle

 .main-container nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

【讨论】：