Support » Themes and Templates » Button text is off-center, won’t align center…

  • Hi,

    The text won’t seem to centre properly in my navigation bar. It’s not aligned left, but just off-center enough to look awful. I’ve tried applying text-align: center; to the Lis, but it doesn’t correct the problem. I’m sure something must be overriding the command.

    Can anyone see what the problem might be?

    My style sheet is pasted below.

    If it helps, the site-in-progress is

    If anyone can point me in the right direction, I’d be really grateful!


     font-family:verdana, arial, Helvetica, sans-serif;

    [Mod note – trimmed lots of style code, if you wish to post a lot of code please use a pastebin]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Michael


    Forum Moderator

    no need to post a loo roll full of styles – nobody can read them anyway and make sense of it.

    having a link to a live site nad using firefox with the web developer add-on, for instance, is a better and quicker way to debug css.

    the space in your buttons in #nav (width:50px;) is simply not wide enough to allow the text to center freely;

    increase the width to 70px and adjust the padding accordingly;
    width:70px;padding: 18px 15px 20px 15px;
    (only use this different one for the ‘home’ button because of the height:
    width:70px;padding: 38px 15px 40px 15px;)

    and most of all – remove the   from your button texts:
    (apart from where it is neccessary to get a line break –
    What     is     Project X?
    Meet     the     Characters
    – )

    that should be all

    adapted styles in total:

    #nav {
    	width: 400px;
             margin-left: 0px;
             margin-right: auto;
             margin-top: -70px;
             line-height: 20px;
    	height: 100px;
             text-align: center;
             font-size: 12px;}
    #nav ul {list-style-type: none;}
    #nav li {display: block; float:left; text-align: center; width: 70px; padding: 38px 15px 40px 15px; border: none; background: url("images/DBD.jpg") no-repeat;} 
    #nav {padding: 18px 15px 20px 15px; border: none; background: url("images/PU.jpg") no-repeat;}
    #nav {background: url("images/PD.jpg") no-repeat;}
    #nav li.current_page_item {background: url("images/DBD.jpg") no-repeat;}
    #nav {padding: 18px 15px 20px 15px; border: none; background: url("images/GreenUpCentre.png") no-repeat;}
    #nav {background: url("images/GD.jpg") no-repeat;}

    edit the following for padding-bottom to show the full X

    #navright {padding: 20px 25px 55px 25px; border: none; background: url("images/contact.jpg") no-repeat;}

    Hi alchymyth,

    Thanks so much for helping me out. Your solution worked a treat.

    The &nbsp thing was just early hour desperation, no need for that garbage now, thanks to you.

    Hope you have the luckiest week ever.


Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Button text is off-center, won’t align center…’ is closed to new replies.