SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2011
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How do you place a left-aligned unordered list at the center of the page?

    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html 
         PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <style type="text/css" >
    	div { width="100%"; margin: 0 auto; }
    	li { text-align: left; }
    </style>
    </head>
    <body>
    <div>
    <ul>
    	<li>Here</li>
    	<li>There</li>
    	<li>Everywhere</li>
    </ul>
    </div>
    </body>
    </html>
    The unordered list is left-aligned and at the very left of the page. I want it to be at the very center of the page but still left-aligned. How do I do this?

  2. #2
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    You'll probably have to use a fixed width if you want to do it like that, and in either case the following: width="100%"; is NOT CSS syntax. You've mixed it up with XHTML grammar. Meaning to write: width: 100px; or something.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,387
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Lose the xml decalaration as that puts IE6 into quirks mode and then just use inline-block to center the list.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    .test{text-align:center}
    .test ul{
    	display:inline-block;
    	text-align:left;
    }
    * html .test ul{display:inline}/* ie6 inline-block fix */
    *+html .test ul{display:inline}/* ie7 inline-block fix */
    </style>
    </head>
    
    <body>
    <div class="test">
    	<ul>
    		<li>Here</li>
    		<li>There</li>
    		<li>Everywhere</li>
    	</ul>
    </div>
    
    </body>
    </html>

  4. #4
    SitePoint Enthusiast
    Join Date
    May 2011
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Now THAT'S how you answer a question! Not only did you completely solve my problem, but you also put in a bunch of helpful bug fixes for different browsers that most definitely should be in there as well. Thanks!


Bookmarks

Posting Permissions

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