How to Center List Items Inside a Ul Element

How do I center list items inside a UL element?

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/

Can't center li inside ul

If you are designing a menu you need this markup:

<div class="menu">
   <ul>
      <li><a href="#" class="menu">Item 1</a></li>
      <li><a href="#" class="menu">Item 2</a></li>
   </ul>
</div>

and this CSS to align the items:

div.menu {
  padding-left: 10%;
  padding-right: 10%;
  margin: 0px;
  background:lightcyan; //for visualization only
}

.menu ul {
  text-align: center;
  margin: auto;
  padding: 0px;
}

.menu ul li {
  display:inline-flex;
  list-style-type: none;
  width: 128px;
  height: 77px;
  margin: 0px;
  padding: 0px;
  text-align: center;
  background:lightblue; //for visualization only
  align-items:center;
  justify-content:center;
}

.menu ul li a {
  align-self:center;
}

Check the JSfiddle https://jsfiddle.net/r2gnkknv/

You will end with this:
Sample Image

How to center an unordered list?

ul {  display: table;  margin: 0 auto;}

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

How to horizontally center align li in ul?

Open the developer tools in your browser.
Inspect the list and the list items
Find where there is some spacing you don't want

Sample Image

… then remove it:

ul {
    padding-left: 0;
}

How can I center ul li into a div?

Since ul and li elements are display: block by default — give them auto margins and a width that is smaller than their container.

ul {
    width: 70%;
    margin: auto;
}

If you've changed their display property, or done something that overrides normal alignment rules (such as floating them) then this won't work.

CSS: align ul li items to center (with margin) without flex model

Simply add text-align:center to your ul. Text-align center can be useful for a number of situations and can be used for more than just text. It can be used on any inline or inline-block elements and can achieve some neat little things like this.

ul.tiles{    width: 220px;    height: 200px;    list-style-type: none;    background: #cecece;    padding: 0;    text-align:center;}
li{    display: inline-block;    width: 50px;    height: 50px;    background: #8ac249;    text-align: center;    line-height: 50px;    margin: 5px;}

<ul class="tiles">    <li>1</li>    <li>2</li>    <li>3</li>    <li>4</li>    <li>5</li></ul>

How can I center my ul li list in css?

http://jsfiddle.net/tfLz08vd/2/

just add

ul {
text-align: center;
}

li {
display: inline-block;
}

Good luck! ;)