Putting list into centre of page [duplicate] - css

Question

This question already has answers here:
How can I center <ul> <li> into a div?
(16 answers)
Closed 6 years ago.
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">
All
</li>
<li>
Cat1
</li>
<li>
Cat2
</li>
<li>
Cat3
</li>
</ul>

Answer 1

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">
All
</li>
<li>
Cat1
</li>
<li>
Cat2
</li>
<li>
Cat3
</li>
</ul>

Answer 2

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">
All
</li>
<li>
Cat1
</li>
<li>
Cat2
</li>
<li>
Cat3
</li>
</ul>
</div>

Answer 3

Please try this:
HTML:
<div class="list_container">
<ul class="filter">
<li class="current">
All
</li>
<li>
Cat1
</li>
<li>
Cat2
</li>
<li>
Cat3
</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;
}

Answer 4

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">
All
</li>
<li>
Cat1
</li>
<li>
Cat2
</li>
<li>
Cat3
</li>
</ul>
</div>