SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2005
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Center a Left Aligned List

    Hi,

    How can I center a list in the middle of the screen, keeping the list left aligned, i.e. all bullets are alligned correctly?

    Thanks,

    Steve

  2. #2
    SitePoint Wizard silver trophybronze trophy Stormrider's Avatar
    Join Date
    Sep 2006
    Location
    Nottingham, UK
    Posts
    3,133
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Asssuming you have something like:

    HTML Code:
    <body>
      <ul id="thelist">
       <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
      </ul>
     </body>
    I would try something along these lines:

    Code:
    body {
      text-align: center;
     }
     
    ul#thelist {
      border: 1px solid black; //just so you can see what is happening
      text-align: left;
      width: 30em; // give it some breathing space
      margin-left: auto;
      margin-right: auto;
     }
    Fiddle around from there

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2005
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks...

    It kind of works.. I think its the width that is the main problem.. I need the width to be the size of the longest list item.. Then the list would always be centered properly overall..

    Not sure this is possible though.

  4. #4
    SitePoint Guru DCS's Avatar
    Join Date
    Apr 2002
    Location
    Arkansas
    Posts
    809
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Enclose the list in a container div with its right and left margins set to auto. That will control your centering on the page.

    Then style your list to be left aligned and whatever other styling you need on it.

    Note: UL automatically moves the list over some to the right. To over ride this and have your list left flush with the container set the UL margin and padding to 0 (zero)

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2005
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think lists are automatically 100% width though, that is the problem..

  6. #6
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You don't need to wrap the ul in an additional element, margins can be applied to the ul just as well. The problem is that using margin: 0 auto is dependant on a width being set.
    Setting the width of the ul determined by the width of the longest list item is going to be problematic. To get the ul to 'shrink wrap' to fit the content, you need to either float it or make it position: absolute. Of course, doing either of those won't centre it.
    So personally, I'd opt for imposing a set width on the ul to overcome these problems and so that you don't end up with situations where one list item length is much longer than any others.


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
  •