Center <ul> <li> into div

Question

After some search, I did not find a proper way to center a list of <li> into a fixed width div... any solution there ?

--

take a look at the page.. dont work !

Answer 1

Try

div#divID ul {margin:0 auto;}

Answer 2

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.

Answer 3

For what type of justification?

Answer 4

To center a block object (e.g. the ul) you need to set a width on it and then you can set that objects left and right margins to auto.

To center the inline content of block object (e.g. the inline content of li) you can set the css property text-align: center;.

Answer 5

Could either be

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

or

div li
{
text-align: center;
}

depends on how it should look like (or combining those)

Answer 6

use oldschool center-tags

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

:-)

Answer 7

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

This will align the 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 8

Just add text-align: center; to your <ul>. Problem solved.

Answer 9

<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>