p2p.wrox.com Forums

p2p.wrox.com Forums (http://p2p.wrox.com/)
-   BOOK: Beginning CSS: Cascading Style Sheets for Web Design ISBN: 978-0-7645-7642-3 (http://p2p.wrox.com/book-beginning-css-cascading-style-sheets-web-design-isbn-978-0-7645-7642-3-154/)
-   -   Centering an UL element within DIV (http://p2p.wrox.com/book-beginning-css-cascading-style-sheets-web-design-isbn-978-0-7645-7642-3/39602-centering-ul-element-within-div.html)

keithc March 9th, 2006 01:33 PM

Centering an UL element within DIV
 
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 08: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

Re: Centering an UL element within DIV
 
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;



All times are GMT -4. The time now is 03:36 PM.

Powered by vBulletin®
Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.
2013 John Wiley & Sons, Inc.