How can I center <ul> <li> into a div?

Question

How can I center an unordered list of <li> into a fixed-width div?

<table width="100%">   <tbody>   <tr>     <td width="41%"><img src="/web/20100104192317im_/http://www.studioteknik.com/html2/html/images/hors-service.jpg" width="400" height="424"></td>     <td width="59%"><p align="left">&nbsp;</p>       <h1 align="left">StudioTeknik.com</h1>       <p><br align="left">         <strong>Marc-André Ménard</strong></p>       <ul>         <li>Photographie digitale</li>         <li>Infographie </li>         <li>Débug et IT (MAC et PC)</li>         <li> Retouche </li>         <li>Site internet</li>         <li>Graphisme</li>       </ul>       <p align="left"><span class="style1"><strong>Cellulaire en suisse : </strong></span><a href="#">+41 079 573 48 99</a></p>       <p align="left"><strong class="style1">Skype : </strong> <a href="#">menardmam</a></p>     <p align="left"><strong class="style1">Courriel :</strong><a href="https://web.archive.org/web/20100104192317/mailto:[email protected]">    [email protected]</a></p></td>   </tr>   </tbody> </table>

Answer 1

To center the ul and also have the li elements centered in it as well, and make the width of the ul change dynamically, 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 a jsFiddle link to the code above.

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.