Center <ul> <li> in div

Question

After some searching, I did not find a suitable way to center the <li> list on a fixed div width.

Check out the page .. This doesn't work either!

Answer 1

Since the default elements ul and li - display: block - give them automatic margins and a width smaller than their container .

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

If you change your display property or do something that overrides the usual alignment rules (for example, their floating ones), this will not work.

Answer 2

To center ul and also have li elements centered in it, and also dynamically change the width of ul, use display: inline-block; and wrap it in a centered div.

 <style type="text/css"> .wrapper { text-align: center; } .wrapper ul { display: inline-block; margin: 0; padding: 0; /* For IE, the outcast */ zoom:1; *display: inline; } .wrapper li { float: left; padding: 2px 5px; border: 1px solid black; } </style> <div class="wrapper"> <ul> <li>Three</li> <li>Blind</li> <li>Mice</li> </ul> </div> 

Update

Here is the jsFiddle link in the code above.

Answer 3

Steps:

• Write style="text-align:center;" parent div ul
• Enter style="display:inline-table;" in ul
• Enter style="display:inline;" in li

or use

 <div class="menu"> <ul> <li>item 1 </li> <li>item 2 </li> <li>item 3 </li> </ul> </div> <style> .menu { text-align: center; } .menu ul { display:inline-table; } .menu li { display:inline; } </style> 

Answer 4

This is the best way to center UL inside any DIV container.

This CSS solution does not use the Width and Float properties. Float: Left and Width: 70%, will cause headaches when you need to duplicate your menu on different pages with different menu items.

Instead of using width, we use indents and margins to define the space around the text / menu item. Also, instead of using Float: Left in the LI element, use display: inline-block.

If you float to the left of the LI, you literally float your content to the left, and then you must use one of the above hacks to center your UL. Display: the inline block creates your Float property for you (sort of). It takes your LI element and turns it into a block element that lies next to each other (not floating).

Responsive design and use of frameworks such as Bootstrap or Foundation will cause problems with the download and content center. They have several built-in classes, but it is always better to do this from scratch. This solution is much better for dynamic menus (such as the Adobe Business Catalyst menu system).

A link to this tutorial can be found at: http://html-tuts.com/center-div-image-table-ul-inside-div/

HTML

 <div class="container"> <ul> <li><a href="#">Button</a></li> <li><a href="#">Button</a></li> <li><a href="#">Button</a></li> <li><a href="#">Button</a></li> <li><a href="#">Button</a></li> </ul> </div> 

CSS

 .container { text-align: center; border: 1px solid green; } .container ul { border: 2px solid red; display: inline-block; margin: 10px 0; padding: 2px; } .container li { display: inline-block; } .container li a { display: inline-block; background: #444; color: #FFF; padding: 5px; text-decoration: none; } 

Answer 5

May be

 div ul { width: [INSERT FIXED WIDTH] margin: 0 auto; } 

or

 div li { text-align: center; } 

depends on how it should look (or combine)

Answer 6

To center a block object (e.g. ul ), you need to set the width on it, and then you can set the left and right margins for this object automatically.

To center the inline content of a block object (for example, the inline content of li ), you can set the css text-align: center; property text-align: center; .

Answer 7

Try

 div#divID ul {margin:0 auto;} 

Answer 8

Just add text-align: center; to your <ul> . The problem is resolved.

Answer 9

Interesting, but try this with floating li elements inside ul: Example here

Now the problem: ul needs a fixed width to actually sit in the center. However, we want this to refer to the width of the container (or dynamic), margin: 0 auto on ul does not work.

It is best to drop the UL / Li list and use a different approach example here

Answer 10

Another variant:

HTML

 <nav> <ul class = "main-nav"> <li> Productos </li> <li> Catalogo </li> <li> Contact </li> <li> Us </li> </ul> </nav> 

CSS

 nav { text-align: center; } nav .main-nav li { float: left; width: 20%; margin-right: 5%; font-size: 36px; text-align: center; } 

Answer 11

If you know the width of ul , then you can simply set the ul field to 0 auto;

This will align ul in the middle of the containing div

Example:

HTML:

 <div id="container"> <ul> <li>Item1</li> <li>Item2</li> </ul> <div> 

CSS

  #container ul{ width:300px; margin:0 auto; } 

Answer 12

Here is the solution I can find:

 #wrapper { float:right; position:relative; left:-50%; text-align:left; } #wrapper ul { list-style:none; position:relative; left:50%; } #wrapper li{ float:left; position:relative; } 

Answer 13

 <div id="container"> <table width="100%" height="100%"> <tr> <td align="center" valign="middle"> <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> </td> </tr> </table> </div> 

Answer 14

use oldschool center tags

 <div> <center> <ul> <li>...</li> </ul></center> </div> 

:-)