Center a <Ul> List with a Left Float <Li>'s with CSS

Center a ul list with a left float li's with CSS

Use this code for the lis instead:

li { margin: 0 10px; display: inline; }

And center your uls' contents:

ul { list-style: none outside none; margin:0; padding: 0; text-align: center; }

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.

How to centrally align a float: left ul/li navigation menu with css?

Give your .navigation ul a width and use margin:0 auto;

.navigation ul 
{
  list-style: none;
  padding: 0;
  width: 400px;
  margin: 0 auto;
}

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>

CSS Center Float

Thank you all, I have used a combination of your answers to build the solution:

nav ul {
    padding:12px 15px;
    margin:0 auto;
    text-align:center;
    overflow:hidden;
}

nav ul li {
    font-size:14px; 
    display:inline-block;
    display:inline;
}

Horizontally centering some li's inside of a ul

This should give you a good start:

ul.nav {
  width: 1000px;
  margin: 0 auto;
  list-style-type: none;
  text-align: center; /* to center horizontally child inline elements */
}

.nav li {
  display: inline-block; /* Set to inline-block instead of float: left */
  width: 300px;
}

Update

To get into to rows, make your ul element have a smaller width.

e.g.

ul.nav {
  width: 800px; /* Smaller width */
  margin: 0 auto;
  list-style-type: none;
  text-align: center; /* to center horizontally child inline elements */
  padding-left: 0;
}

Fiddle

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

Centering the pagination in bootstrap

Bootstrap has added a new class from 3.0.

<div class="text-center">
    <ul class="pagination">
        <li><a href="?p=0" data-original-title="" title="">1</a></li> 
        <li><a href="?p=1" data-original-title="" title="">2</a></li> 
    </ul>
</div>

Bootstrap 4 has new class

<div class="text-xs-center">
    <ul class="pagination">
        <li><a href="?p=0" data-original-title="" title="">1</a></li> 
        <li><a href="?p=1" data-original-title="" title="">2</a></li> 
    </ul>
</div>

For 2.3.2

<div class="pagination text-center">
    <ul>
        <li><a href="?p=0" data-original-title="" title="">1</a></li> 
        <li><a href="?p=1" data-original-title="" title="">2</a></li> 
    </ul>
</div>

~~Give this way:~~

.pagination {text-align: center;}

~~It works because ul is using inline-block;~~

Fiddle: http://jsfiddle.net/praveenscience/5L8fu/

~~Or if you would like to use Bootstrap's class:~~

<div class="pagination pagination-centered">
    <ul>
        <li><a href="?p=0" data-original-title="" title="">1</a></li> 
        <li><a href="?p=1" data-original-title="" title="">2</a></li> 
    </ul>
</div>

Center a <Ul> List with a Left Float <Li>'s with CSS