如何获得以div为中心的ul列表

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。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;