Putting list into centre of page

Question

I'm having trouble getting a list to be centre page using CSS. I have tried a few different things such as using an outer div etc but just can't get the list to move into the centre of the page.

Here is my un-centred HTML and CSS:

.filter {
  padding-bottom: 40px;
}
.filter li {
  float: left;
  padding-right: 10px;
  border-right: 1px solid #ddd;
  margin-right: 10px;
  font-size: 12px;
  line-height: 12px;
  list-style: none;
}
.filter li a {
  color: #888;
}
.filter li:last-child {
  border: 0px;
}
.filter li.current a {
  color: #d16f4e;
}

<ul class="filter">
  <li class="current">
    <a href="#" title="all">All</a>
  </li>
  <li>
    <a href="#" title="cat1">Cat1</a>
  </li>
  <li>
    <a href="#" title="cat2">Cat2</a>
  </li>
  <li>
    <a href="#" title="cat3">Cat3</a>
  </li>
</ul>

score 0 · Answer 1 · answered Mar 31 '16 at 17:42

Floating and centering contradict each other.

Simply make the LI display:inline-block instead, and use text-align on the parent to center them.

.filter {
  padding-bottom: 40px;
  text-align:center;
}
.filter li {
  display:inline-block;
  padding-right: 10px;
  border-right: 1px solid #ddd;
  margin-right: 10px;
  font-size: 12px;
  line-height: 12px;
  list-style: none;
}
.filter li a {
  color: #888;
}
.filter li:last-child {
  border: 0px;
}
.filter li.current a {
  color: #d16f4e;
}

<ul class="filter">
  <li class="current">
    <a href="#" title="all">All</a>
  </li>
  <li>
    <a href="#" title="cat1">Cat1</a>
  </li>
  <li>
    <a href="#" title="cat2">Cat2</a>
  </li>
  <li>
    <a href="#" title="cat3">Cat3</a>
  </li>
</ul>

Scott Marcus · Answer 2 · 2016-03-31T17:48:42.847

You just need the list to be treated like an inline element so that its width will be no wider than its content and then you can center it within the us parent element:

.filter {
  padding-bottom: 40px;
  text-align:center;
}

.filter li {
  display:inline;
  border-right: 1px solid #ddd;
  font-size: 12px;
  padding-right: 10px;
  margin-right: 10px;
  list-style: none;
}

.filter li a {
  color: #888;
}

.filter li:last-child {
  border: 0px;
}

.filter li.current a {
  color: #d16f4e;
}

<div id="main">

  <ul class="filter">
    <li class="current">
      <a href="#" title="all">All</a>
    </li>
    <li>
      <a href="#" title="cat1">Cat1</a>
    </li>
    <li>
      <a href="#" title="cat2">Cat2</a>
    </li>
    <li>
      <a href="#" title="cat3">Cat3</a>
    </li>
  </ul>
  
</div>

score 0 · Answer 3 · answered Mar 31 '16 at 17:44

You can wrap the list in a div with the text-align:center property to center it, and set the display property of the <ul> to inline block:

.filter {
  padding-bottom: 40px;
  display:inline-block;
  padding-left:0;
}
.filter li {
  float: left;
  padding-right: 10px;
  border-right: 1px solid #ddd;
  margin-right: 10px;
  font-size: 12px;
  line-height: 12px;
  list-style: none;
}
.filter li a {
  color: #888;
}
.filter li:last-child {
  border: 0px;
}
.filter li.current a {
  color: #d16f4e;
}
div {
  text-align: center;
}

<div>
  <ul class="filter">
    <li class="current">
      <a href="#" title="all">All</a>
    </li>
    <li>
      <a href="#" title="cat1">Cat1</a>
    </li>
    <li>
      <a href="#" title="cat2">Cat2</a>
    </li>
    <li>
      <a href="#" title="cat3">Cat3</a>
    </li>
  </ul>
</div>

score 0 · Answer 4 · answered Mar 31 '16 at 17:46

Please try this:

HTML:

 <div class="list_container">
 <ul class="filter">
      <li class="current">
        <a href="#" title="all">All</a>
      </li>
      <li>
        <a href="#" title="cat1">Cat1</a>
      </li>
      <li>
        <a href="#" title="cat2">Cat2</a>
      </li>
      <li>
        <a href="#" title="cat3">Cat3</a>
      </li>
    </ul>
    </div>

CSS:

.list_container{
    margin: 0 auto;
    text-align: center;
    width: 960px;
}

.filter {
  padding-bottom: 40px;
  text-align:center;
}
.filter li {
  display:inline;
  padding-right: 10px;
  border-right: 1px solid #ddd;
  margin-right: 10px;
  font-size: 12px;
  line-height: 12px;
  list-style: none;
}
.filter li a {
  color: #888;
}
.filter li:last-child {
  border: 0px;
}
.filter li.current a {
  color: #d16f4e;
}

Putting list into centre of page

4 Answers4