SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2010
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Having trouble centering menu in Wordpress

    Warning, I am a bit of a CSS noob.

    I am working on a Wordpress TwentyTen theme customization and can't seem to center the menu properly. I have tried everything I can think of, and it just won't move.

    The site is http://ae.windridgewebdesign.com

    Any ideas?

    I am guessing it is something with float, position or display as those are 3 areas I don't have much experience with.

  2. #2
    SitePoint Addict
    Join Date
    May 2006
    Posts
    291
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi. I have the Web Developer Firefox Extension installed, and when I go to Display Block Size I get what's shown in the image below. I'm no CSS expert at all but I'm guessing that for some reason the text is remaining left aligned within the block that surrounds it. This is probably down to either inheritance or overwriting of styles.

    Hope that helps.


  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2010
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that tool. It will be a huge help. However, I still can't seem to figure out what is going on. If I take out the float left for the menu, everything centers, but then each page ends up on its own line underneath the previous one.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    You would need to give the ul a width that matches the sum of its elements and then use margin:auto to center it.

    e.g.

    Code:
    #access div.menu ul {
    margin:0 auto;
    text-align:center;
    width:680px;
    }
    The only other way without using an exact measurement would be to use display:inline-block on the list elements instead of floating and let text-align:center on the menu center it. However you'd need to hack for IE7 and under so best avoided if possible.


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
  •