如何让 ul 列表在 div 中居中 [重复]

Question

我在这里创建一个小提琴：http://jsfiddle.net/WayDf/27/

如何使 ul 中包含的四个白框在红色条中水平居中？我已经尝试了很多东西来添加#social ul 我只是无法弄清楚。我已经准备好阅读有关该主题的许多帖子，并尝试了许多以前建议的事情，但我无法解决我的特定问题。我错过了什么？

footer {
  width: 100%;
  position: relative;
  background-color: #C5C5C5;
  display: block;
  overflow: hidden;
}

footer section#footer-content {
  max-width: 1440px;
  min-height: 50px;
  margin: 30px auto;
  padding: 0 .694444%;
  /* 10px / 1440px */
  position: relative;
  display: block;
  overflow: hidden;
}

footer #social {
  height: 30px;
  margin: 0 auto;
  background-color: red;
  width: 600px;
  position: relative;
}

footer #social ul {
  list-style: none;
  width: 100%;
  margin: 0 50%;
}

footer #social li {
  float: left;
  margin: 0 .3em;
  position: relative;
  display: block;
  width: 30px;
  height: 30px;
  overflow: hidden;
}

footer #social a {
  text-decoration: none;
  color: #CC7D29;
  background: #ffffff;
  display: block;
  text-align: center;
  height: 30px;
}

<footer>
  <section id="footer-content">
    <div id="social">
      <ul>
        <li>
          <a href="#"></a>
        </li>
        <li>
          <a href="#"></a>
        </li>
        <li>
          <a href="#"></a>
        </li>
        <li>
          <a href="#"></a>
        </li>
      </ul>
    </div>
  </section>
</footer>

Answer 1

删除<ul> 上的边距并将其替换为text-align:center; 和padding:0;。列表项上的，去掉浮动和填充，将显示改为inline-block。

footer {
  width: 100%;
  position: relative;
  background-color: #C5C5C5;
  display: block;
  overflow: hidden;
}

footer section#footer-content {
  max-width: 1440px;
  min-height: 50px;
  margin: 30px auto;
  padding: 0 .694444%;
  /* 10px / 1440px */
  position: relative;
  display: block;
  overflow: hidden;
}

footer #social {
  height: 30px;
  margin: 0 auto;
  background-color: red;
  width: 600px;
  position: relative;
}

footer #social ul {
  list-style: none;
  width: 100%;
  xmargin: 0 50%;
  text-align:center;
  padding:0;
}

footer #social li {
  xfloat: left;
  margin: 0 .3em;
  position: relative;
  display: inline-block;
  width: 30px;
  height: 30px;
  overflow: hidden;
}

footer #social a {
  text-decoration: none;
  color: #CC7D29;
  background: #ffffff;
  display: block;
  text-align: center;
  height: 30px;
}

<footer>
  <section id="footer-content">
    <div id="social">
      <ul>
        <li>
          <a href="#"></a>
        </li>
        <li>
          <a href="#"></a>
        </li>
        <li>
          <a href="#"></a>
        </li>
        <li>
          <a href="#"></a>
        </li>
      </ul>
    </div>
  </section>
</footer>