center ul tag horizontal in div

Question

How to center ul inside of div.

A common advice are

left:50%
some variations of display:inline

but it does not work. How to fix this?

body {
  margin: 0;
  background: #f4f5f5;
}
.menu {
  text-align: center;
  margin: 0 auto;
  width: 1023px;
  background: #f4f5f5;
}
.picture {
  margin: 0 auto;
  width: 1023px;
  height: 255px;
  background: green;
}
ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
}
li {
  float: left;
}
li a {
  display: block;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

<div class="content">
  <div class="menu">
    <ul>
      <li><a>Test</a>
      </li>
      <li><a>Test</a>
      </li>
      <li><a>Test</a>
      </li>
      <li><a>Test</a>
      </li>
      <li><a>Test</a>
      </li>
      <li><a>Test</a>
      </li>
      <li><a>Test</a>
      </li>
    </ul>
  </div>
  <div class="picture">
  </div>
</div>

I'm voting to close this question as off-topic because there are a multitude of solutions for this found by just searching SO. — Rob, May 25 '16 at 16:58
Possible duplicate of [Center

into div](http://stackoverflow.com/questions/1708054/center-ul-li-into-div) — Daniel Beck, May 26 '16 at 04:22

dippas · Accepted Answer · 2016-05-25T16:59:51.633

set text-align:center and to ul and inline-block to li(removing float:left)

Tweaked your code, by removing duplicated code.

body {
  margin: 0;
  background: #f4f5f5;
}
.content {
  margin: 0 auto;
  width: 1023px;
}
.picture {
  height: 255px;
  background: green;
}
ul {
  list-style: none;
  background: #f4f5f5;
  padding: 0;
  margin: 0;
  text-align: center;
}
li {
  display: inline-block
}
li a {
  display: block;
  padding: 14px 16px;
  text-decoration: none;
}

<div class="content">
  <ul>
    <li><a>Test</a>
    </li>
    <li><a>Test</a>
    </li>
    <li><a>Test</a>
    </li>
    <li><a>Test</a>
    </li>
    <li><a>Test</a>
    </li>
    <li><a>Test</a>
    </li>
    <li><a>Test</a>
    </li>
  </ul>
  <div class="picture">
  </div>
</div>

score 1 · Answer 2 · answered May 25 '16 at 16:55

This should solve the problem

body{
        margin:0;
        background:#f4f5f5;
    }
    .menu {
        text-align: center;
        margin: 0 auto;
        width: 1023px;
        background: #f4f5f5;
    }
    .picture {
        margin:0 auto;
        width: 1023px;
        height: 255px;
        background: green;
    }
    ul {
        list-style: none;
        margin: 0 auto;
        padding: 0;
        overflow: hidden;
      display: inline-block;
    }
    li{
        float:left;
    }
    li a {
        display: block;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }

<div class="content">
    <div class="menu">
        <ul>
            <li><a>Test</a></li>
            <li><a>Test</a></li>
            <li><a>Test</a></li>
            <li><a>Test</a></li>
            <li><a>Test</a></li>
            <li><a>Test</a></li>
            <li><a>Test</a></li>
        </ul>
    </div>
    <div class="picture">
    </div>
</div>

score 0 · Answer 3 · answered May 25 '16 at 17:01

Use a CSS3 Layout mode called Flexbox.

    .menu {
        display: flex;            // <-- necessary to activate flexbox
        justify-content: center;  // <-- centers horizontally
        // align-items: center;   // <-- would center vertically
        margin: 0 auto;
        width: 1023px;
        background: #f4f5f5;
    }

learn more:
http://flexboxin5.com/
http://flexboxfroggy.com/

center ul tag horizontal in div

3 Answers3