How to centralize the placement of list items?

Question

I have list items for my nav site that I need to focus on. I am floating, so that I can have additions in the list items ... setting them in a line seems to eliminate the top and bottom filling.

<style type="text/css"> #nav { width:100%; } #nav ul { margin-right: auto; margin-left: auto; } #nav ul li { float: left; background-color: #333; color: #fff; padding: 15px; margin: 10px; } </style> <div id='nav'> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> </div> 

Answer 1

If items are displayed in a line, you can align them as text. Setting a problem with fixed row height packaging.

  #nav{ text-align: center; line-height:30px; } #nav li { list-style:none; margin: 0 5px; display:inline; border:gray solid 1px; } 

A working demo can be seen here: http://jsfiddle.net/AqRJA/1/

Answer 2

Try changing your CSS to:

 #nav ul{ margin-right:auto; margin-left:auto; text-align:center; } #nav ul li{ display:inline; background-color:#333; color:#fff; padding:15px; margin:10px; } 

Greetings

Cynthia

Answer 3

specify width ul

replace your class with this

  #nav ul { margin-right: auto; margin-left: auto; width:400px; } 

Answer 4

I have done the same sooooo many times.

You cannot center anything with% layout, you have to be specific in pixels or ems.

So, I modified my code to give the div a specific width, and then centered it.

 `<div class="centerme"> <!--put your stuff here--> </div>` 

Here's the jsfiddle:

http://jsfiddle.net/EqNtH/