SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist bradical1379's Avatar
    Join Date
    Feb 2007
    Posts
    443
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

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

    Code HTML4Strict:
    <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!

  2. #2
    SitePoint Guru babyboy808's Avatar
    Join Date
    Nov 2004
    Location
    dublin
    Posts
    602
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this:

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

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually you should give the list a width and then set its left and right margins to auto.

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    There's three ways
    Code:
    #banner-ads {
      text-align: center;
    }
    #banner-ads li { display: inline }
    Code:
    #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 :
    Code:
    <ul id="banner-ads">


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
  •