how to center a list to the middle of a page?

[bradical1379]

I have a list of banners that I want to reside in the middle of my site, here is the code:

<div id="banner-ads">
<ul>
<li><a href="#">Banner Ad 1</a></li>
<li><a href="#">Banner Ad 2</a></li>
<li><a href="#">Banner Ad 3</a></li>
<li><a href="#">Banner Ad 4</a></li>
</ul>
<p><a href="#">Advertise here!</a></p>
</div>

My site is liquid, but I can't figure out the way to get the <div> container to always keep the list centered.

Thanks for any pointers!

[babyboy808]

Try this:

ul#banner-ads {
text-align: center;
}

[Dan Schulz]

Actually you should give the list a width and then set its left and right margins to auto.

[markbrown4]

There's three ways

#banner-ads {
  text-align: center;
}
#banner-ads li { display: inline }

#banner-ads {
  width: 500px; /* As Dan suggested */
  margin: 0 auto;
  /*Do some clearing magic here also */
}
#banner-ads li { float: left }

http://www.search-this.com/2007/09/1...t-not-a-float/

The first solution is the simplest and if inline elements will suit your design go with that, the second solution has the draw back of needing to know the width of the list to be centered and won't scale gracefully, a width specified in em's will work better.

The third solution is quite complicated but is a solid solution to centering a list of floated (block level) elements.

And you can probably do without the div by moving the id to here :

<ul id="banner-ads">