A191919 A191919 - 6 months ago 27
CSS Question

center ul tag horizontal in div

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>




Answer

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>

Comments