Centering an UL element within DIV

keithc · March 9th, 2006, 02:33 PM

I have an unordered list "UL" that contains several "Li" elements and I am having difficulties centering the UL withing the DIV it is contained within. It is aligning itself LEFT and I'd like to have it centered across the page.

<h1>UL table-style menu</h1>
<ul id="ul-table">
<li class="top"><a href="">first link</a></li>
<li class="top"><a href="">second link</a></li>
<li class="top"><a href="">third link</a></li>
<li class="top right"><a href="">fourth link</a></li>
<li><a href="">fifth link</a></li>
<li><a href="">sixth link</a></li>
<li><a href="">seventh link</a></li>
<li class="right"><a href="">eighth link</a></li>
</ul>
<div class="clear"></div>

richard.york · March 27th, 2006, 09:10 AM

On the UL you want centered, assuming you have set a fixed width on that[list] of some kind, apply the margin: auto; declaration, and that will center the block[list] within the <div>.

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design

codingforever99 · April 4th, 2013, 04:13 PM

first of all you have to move your UL and its related li elements to be btween
<div> and </div> Tags, so they will be related to the div element, then you have several options to centering your UL menu, choose one of them.

1- using css code to DIV will center all text including your menu.

Code:

text-align: center;

2- adding some padding space to DIV will move all div element to start after 70 pixel from the left.

Code:

padding-left:70px;

3- moving the main DIV position to the place to want by add this code

Code:

    position: fixed; 
    top: 100px;
    left: 200px;