[Solved] How to center an unordered list?

I need to center an unordered list of unknown width, while still keeping the list-items left aligned.

Achieve the same result as this:

HTML

<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

CSS

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

Except my <ul> doesn’t have a parent div. ul { margin: 0 auto; } doesn’t work because I don’t have a fixed width. ul { text-align: center; } doesn’t work because the list-items won’t be left aligned anymore. So how can I center this <ul> while keeping the <li>s left aligned (without having a parent div wrapper)?

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

EDIT: Perhaps my wording wasn’t the best… The first block of code already works… what i need is to do it without the <div> wrapper, if that’s possible of course. Float tricks? Pseudo element tricks? There must be a way.

Enquirer: Sunny

||

Solution #1:

ul {
  display: table;
  margin: 0 auto;
}
<html>

<body>
  <ul>
    <li>56456456</li>
    <li>4564564564564649999999999999999999999999999996</li>
    <li>45645</li>
  </ul>
</body>

</html>

Respondent: Rafael Herscovici

Solution #2:

Let’s say the list is:

<ul>
 <li>item1</li>
 <li>item2</li>
 <li>item3</li>
</ul>

For this example.
If I understand correctly, you want the list items to be in the middle of the screen, but you want the text IN those list items to be centered to the left of the list item itself. Doing that is actually pretty easy. You just need some CSS:

ul {
    display: table; 
    margin: 0 auto;
    text-align: left;
}

And it works! Here is what is happening. First, we say we want to affect only unordered lists. Then, we do Rafael Herscovici’s trick for centering the list items. Finally, we say to align the text to the left of the list items.

Respondent: Eli nero

Solution #3:

To center align an unordered list, you need to use the CSS text align property. In addition to this, you also need to put the unordered list inside the div element.

Now, add the style to the div class and use the text-align property with center as its value.

See the below example.

<style>
.myDivElement{
    text-align:center;
}
.myDivElement ul li{
   display:inline;

 }
</style>
<div class="myDivElement">
<ul>
    <li>Home</li>
    <li>About</li>
    <li>Gallery</li>
    <li>Contact</li>
</ul>
</div>

Here is the reference website Center Align Unordered List

Respondent: ROSHAN PARIHAR

Solution #4:

http://jsfiddle.net/psbu2/3/

If it is possible for you to use your own list bullets

Try this:

<html>
    <head>
        <style type="text/css">

            ul {
                margin:0;
                padding:0;
                text-align: center;
                list-style:none;                
            }
            ul  li {
                padding: 2px 5px;               
            }

            ul li:before {
                content:url(http://www.un.org/en/oaj/unjs/efiling/added/images/bullet-list-icon-blue.jpg);;
            }
        </style>
    </head>
    <body>

            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>

    </body>
</html>
Respondent: Timo Jungblut

Solution #5:

list-style-position:inside

Use list-style-position:inside:

ul {
  text-align: center;
  list-style-position: inside;
}
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

Respondent: Spectric

Solution #6:

From your post, I understand that you cannot set the width to your li.

How about this?

ul {
  border:2px solid red;
  display:inline-block;
}

li {
  display:inline;
  padding:0 30%; /* try adjusting the side % to give a feel of center aligned.*/
}
<ul>
    <li>Hello</li>
    <li>Hezkdhkfskdhfkllo</li>
    <li>Hello</li>
</ul>

Here’s a demo. http://codepen.io/anon/pen/HhBwx

Respondent: Mevin Babu

Solution #7:

In case the dots are stuck on the left side while the text is aligned on the center. You can remove the “ul” from the script.

Example:

<!doctype html>
 <html>
    <style>
        div.list {
            text-align: center;
        }
    </style>
    
    <body>
        <div class="list">
            <li>Hi</li>
            <li>Hi</li>
            <li>Hi</li>
        </div>
    </body>
</html>
Respondent: Ablogical

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Leave a Reply

Your email address will not be published.