www.webdeveloper.com
Results 1 to 3 of 3

Thread: How to center a list

  1. #1
    Join Date
    Oct 2010
    Posts
    3

    How to center a list

    Hi guys,
    I'm making a Navigation bar and I'm having trouble centering it. This is my code.

    Code:
    <ul>
        <li> <a href="page1.html"> Page 1 </a> </li>    
        <li> <a href="page2.html"> Page 2 </a> </li>  
        <li> <a href="page3.html"> Page 3 </a> </li>
    </ul>
    and css -

    Code:
    ul {
    	list-style-type:none;
    	margin:0;
    	padding:0;
    	overflow:hidden;
    }
    
    li {
    	float:left;
    }
    
    a:link, a:visited {
    	display:block;
    	width:120px;
    	font-weight:bold;
    	color:#FFF;
    	background-color:#E26A5C;
    	text-align:center;
    	padding:4px;
    	text-decloration:none;
    	text-transform:uppercase;
    }
    
    a:hover, a:active {
    	background-color:#595959;
    }
    So how could i align all this to the center?

    Thank you!

  2. #2
    Join Date
    Nov 2006
    Location
    Springfield, MO
    Posts
    1,541
    One way is to create a container, give it a width, and margin of auto on the left and right.

    Code:
    <div id="container">
    <ul>
    <li></li>
    </ul>
    </div>
    Code:
    div#container{
       width:400px;
       margin:0 auto;
    }
    Ryan Butler

    Ryan Butler.org

  3. #3
    Join Date
    Oct 2010
    Posts
    3
    That works great, thank you!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles