Thursday 14 October 2010

How to center a UL tag

Have you ever tried to center a UL tag inside a DIV tag (e.g. a menu)?

Well, this is the best solution I found on the Internet, based on pure CSS:
<style>
.ul_container {
 float: right;
 position: relative;
 left: -50%;
 text-align: left;
}
.ul_container ul {
 list-style: none;
 position: relative;
 left: 50%;
 margin: 0 10px;
 -moz-padding-start: 0; /* for Firefox */
}
.ul_container ul li {
 float: left;
 position: relative;
 margin:0;
}
</style>

<div class="ul_container">
 <ul>
   <li>one</li>
   <li>two</li>
   <li>three</li>
   <li>four</li>
 </ul>
</div>

I hope it helps you

No comments:

Post a Comment