Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

List not aligning/centering horizontally

List not aligning/centering horizontally

Problem

I'm having trouble centering these buttons on a page. I just know it's something stupid I missed, but I can't figure out what. Here's the page:

  • All Time
  • Last 2 Weeks
  • Last Year

Here is the CSS:

#choiceBtns li{
    display:inline !important;
    border:solid;
    padding:3px;
}

#choiceBtns {
    margin:10px;
    margin-left: auto ;
    margin-right: auto ;
}
Problem courtesy of: adrianmc

Solution

Start by modifying the CSS as follows:

#choiceBtns {
    margin:10px;
    margin-left: auto ;
    margin-right: auto ;
    text-align: center;
}

Since your li child elements are inline, they will center within the width of the parent block, which in your case, is also the width of the page.

You may get slightly better control if you apply display: inline-block to the li elements if you need to add vertical padding and so on.

Finally, you don't need the !important declaration.

Solution courtesy of: Marc Audet

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

List not aligning/centering horizontally

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×