how to get ul list centered within div

Question

I create a fiddle here: http://jsfiddle.net/WayDf/27/

How can I get the four white boxes which is contained within a ul to be horizontally centered within the red bar? I've tried many things to footer #social ul I just cannot figure it out. I have ready through the many posts on this topic and have tried many things which have been suggested before, none which I can get to work on my particular issue. What am I missing?

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>

The accepted answer for [this question](https://stackoverflow.com/questions/16946284/how-to-horizontally-align-ul-to-center-of-div) can help. — Lemayzeur, Apr 18 '18 at 22:24
I have read through these thoroughly before posting this and none of them I can get to work on my particular problem. Of course I'm missing something, I just do not know what that is which is why I posted. Thanks. — Kim, Apr 19 '18 at 02:44

score 1 · Accepted Answer · answered Apr 18 '18 at 22:21

Remove the margin on the <ul> and replace that with text-align:center; and padding:0;. The on the list items, remove the float and padding, and change the display to 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>

how to get ul list centered within div

1 Answers1