How do I center list items inside a UL element?

Question

How do I center list items inside a ul without using extra divs or elements. I have the following. I thought text-align:center would do the trick. I can't seem to figure it out.

<style>
ul {
    width:100%;
    background:red;
    height:20px;
    text-align:center;
}
li {
    display:block;
    float:left;
    background:blue;
    color:white;
    margin-right:10px;
}
</style>

<ul>
  <li>test</li>
  <li>test</li>
  <li>test</li>
  <li>test</li>
  <li>test</li>
</ul>

Check jsfiddle http://jsfiddle.net/3Ezx2/1/

score 134 · Accepted Answer · answered Dec 27 '11 at 04:48

134

write display:inline-block instead of float:left.

li {
        display:inline-block;
        *display:inline; /*IE7*/
        *zoom:1; /*IE7*/
        background:blue;
        color:white;
        margin-right:10px;
}

http://jsfiddle.net/3Ezx2/3/

answered Dec 27 '11 at 04:48

sandeep

91,313
23
137
155

1

i also written hack for IE7 & you can check the fiddle :) – sandeep Dec 27 '11 at 04:53
I was about to ask the same. What is the zoom for and what does `* `represent – Pinkie Dec 27 '11 at 05:13
@refhat; about zoom:1 check this http://stackoverflow.com/questions/6287023/what-bug-does-zoom1-fix-in-css – sandeep Dec 27 '11 at 05:20
@Pinkie; * it's hack for IE7 check this http://www.javascriptkit.com/dhtmltutors/csshacks3.shtml – sandeep Dec 27 '11 at 05:21
this method is depending to `margin-right:10px;` see if it change: http://jsfiddle.net/3Ezx2/2234/ – eQ19 May 28 '18 at 11:20

score 27 · Answer 2 · answered Sep 27 '16 at 18:23

27

A more modern way is to use flexbox:

ul{
  list-style-type:none;
  display:flex;
  justify-content: center;

}
ul li{
  display: list-item;
  background: black;
  padding: 5px 10px;
  color:white;
  margin: 0 3px;
}
div{
  background: wheat;
}

<div>
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>  

</div>

answered Sep 27 '16 at 18:23

hamncheez

709
12
22

Can I align for examle 2 items to left, and have still 3 items in center of page, not center of free area? – miljon Jan 05 '18 at 11:27
1

Seems it works more perfect. checked here http://jsfiddle.net/3Ezx2/2235/ – eQ19 May 28 '18 at 11:28

score 24 · Answer 3 · answered Dec 27 '11 at 07:46

24

li{
    display:table;
    margin:0px auto 0px auto;
}

This should work.

answered Dec 27 '11 at 07:46

Kishore Kumar

12,675
27
97
154

score 15 · Answer 4 · answered Jul 20 '15 at 06:38

15

Looks like all you need is text-align: center; in ul

answered Jul 20 '15 at 06:38

Pencilcheck

2,664
3
25
14

5

This works in combination with `li {display:inline-block;}` – Joe Almore Mar 15 '16 at 19:33

score 3 · Answer 5 · answered Jun 01 '16 at 15:52

I have run into this issue before and found that sometimes padding is the issue.

By removing padding from the ul, any li's set to inline-block will be nicely centred:

* {
 box-sizing: border-box;
}

ul {
 width: 120px;
 margin: auto;
 text-align: center;
 border: 1px solid black;
}

li {
 display: inline-block;
}

ul.no_pad {
 padding: 0;
}

p {
 margin: auto;
 text-align: center;
}

.break {
 margin: 50px 10px;
}

<div>  
  <p>With Padding (Default Style)</p>
            <ul class="with_pad">
                <li>x</li>
                <li>x</li>
                <li>x</li>
                <li>x</li>
            </ul>
  <div class="break"></div>
  <p>No Padding (Padding: 0)</p>
   <ul class="no_pad">
                <li>x</li>
                <li>x</li>
                <li>x</li>
                <li>x</li>
            </ul>
 <div>

Hope that helps anyone running into this same issue :)

Cheers,

Jake

thank you! this worked in firefox, all i needed to was remove the default padding the browser applies — brunobliss, Aug 10 '16 at 23:18

score 2 · Answer 6 · answered Dec 12 '17 at 11:59

Another way to do this:

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

ul {
  width: auto;
  display: table;
  margin-left: auto;
  margin-right: auto;
}

ul li {
  float: left;
  list-style: none;
  margin-right: 1rem;
}

http://jsfiddle.net/f6qgf24m/

score 2 · Answer 7 · edited Aug 10 '18 at 07:34

2

ul {
    width: 100%;
    background: red;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

li {
    background: blue;
    color: white;
    margin-right: 10px;
}

edited Aug 10 '18 at 07:34

NaN

7,441
6
32
51

answered Aug 10 '18 at 06:55

Rahul Mahto

23
4

score 1 · Answer 8 · answered Dec 25 '16 at 22:05

1

I added the div line and it did the trick:

<div style="text-align:center">
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>

answered Dec 25 '16 at 22:05

Lyra

27
4

Pinkie asked for a solution without using div – pseyfert Dec 25 '16 at 22:31

score 1 · Answer 9 · answered Jun 01 '17 at 03:40

I had a problem slimier to yours I this quick and its the best solution I have found so far.

What the output looks like

Shows what the output of the code looks like The borders are just to show the spacing and are not needed.

Html:

    <div class="center">
      <ul class="dots">
        <span>
          <li></li>
          <li></li>
          <li></li>
        </span>
      </ul>
    </div>

CSS:

    ul {list-style-type: none;}
    ul li{
        display: inline-block;
        padding: 2px;
        border: 2px solid black;
        border-radius: 5px;}
    .center{
        width: 100%;
        border: 3px solid black;}
    .dots{
        padding: 0px;
        border: 5px solid red;
        text-align: center;}
    span{
        width: 100%;
        border: 5px solid blue;}

Not everything here is needed to center the list items.

You can cut the css down to this to get the same effect:

    ul {list-style-type: none;}
    ul li{display: inline-block;}
    .center{width: 100%;}
    .dots{
        text-align: center;
        padding: 0px;}
    span{width: 100%;}

score 1 · Answer 10 · answered Mar 19 '21 at 06:30

1

The thing is ul tag comes with default margin and padding, therefore all you need to do is:

ul {
    margin: 0px;
    padding: 0px;
}

answered Mar 19 '21 at 06:30

daxter-army

11
1

score 0 · Answer 11 · answered Apr 06 '17 at 16:02

0

Neither text-align:center nor display:inline-block worked for me on their own, but combining both did:

ul {
  text-align: center;
}
li {
  display: inline-block;
}

answered Apr 06 '17 at 16:02

Cedric Ipkiss

5,662
2
43
72

score 0 · Answer 12 · answered Mar 07 '20 at 19:42

0

In Bootstrap (4) use display: inline-flex, like so:

li {
    display: inline-flex;
    /* ... */
}

answered Mar 07 '20 at 19:42

KeyC0de

4,728
8
44
68

score 0 · Answer 13 · answered May 09 '21 at 04:17

0

// Ul css

ul{
  width: 100%;
  justify-content: center;
  list-style-type: none;
  display: flex;

}

// ul li css

ul li{
  display: inline;
}

answered May 09 '21 at 04:17

Nazmul Haque

720
8
13

score -1 · Answer 14 · edited Oct 06 '20 at 12:40

-1

I overcame the problem with this solution.

HTML:

<div class="list-wrapper">
    <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
        <li>e</li>
    </ul>
</div>

CSS:

.list-wrapper {
   text-align: -webkit-center;
}
.list-wrapper ul {
    display:block;
}

edited Oct 06 '20 at 12:40

aboger

2,214
6
33
47

answered Oct 06 '20 at 05:45

Divya kamboj

1

How do I center list items inside a UL element?

14 Answers14

http://jsfiddle.net/3Ezx2/3/

What the output looks like

Html:

CSS:

Not everything here is needed to center the list items.

Linked

Related