Center a Left Aligned List

**steveoidm** · Sep 21, 2006 07:24

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

**Stormrider** · Sep 21, 2006 07:35

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

**steveoidm** · Sep 21, 2006 07:49

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.

**DCS** · Sep 21, 2006 08:42

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)

**steveoidm** · Sep 21, 2006 08:49

I think lists are automatically 100% width though, that is the problem..

**Tyssen** · Sep 21, 2006 17:49

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.

User Tag List

Thread: Center a Left Aligned List

Thread Tools

Display

Center a Left Aligned List

Bookmarks

Bookmarks

Posting Permissions