Tekst in link centreren

[Verwijderd]

Beste designers,

Ik ben momenteel bezig met het opzetten van de volgende website:

http://www.vitalpeople.net/html/

en ik loop tegen een klein probleem aan;
Het menu staat goed, nu moet echter de tekst van een knop gecentreerd worden. In IE is dit geen probleem met onderstaande code, echter in firefox doet hij het niet. Wie kan mij helpen?

stukje html code:

HTML:

<div id="navigation">
        <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/">Link1</a></li>
      </ul>
</div>

stukje css code:

Cascading Stylesheet:

#navigation ul li a {
        color: #26578d; 
        text-decoration: none; 
        width: 129px; 
        height: 29px;
        background: url(images/navItem-a.png) no-repeat;
        display: -moz-inline-box;
        padding: 7px 0px 0px 0px;
        text-align: center;
    }

Ik heb al geprobeerd met text-align: -moz-center; maar dit werkt niet. Weet iemand de oplossing?

[Bozozo]

Gewoon display: block en text-align center?

[Verwijderd]

ik kan display niet veranderen naar block, omdat hij ook inline moet zijn...

[Verwijderd]

Ik heb het al!!!

Cascading Stylesheet:

#navigation ul li a {
        color: #26578d; 
        text-decoration: none; 
        width: 129px; 
        height: 29px;
        background: url(images/navItem-a.png) no-repeat;
        display: -moz-inline-block;
        padding: 7px 0px 0px 0px;
        text-align: center;
    }

Cascading Stylesheet:

display: -moz-inline-box;

veranderd naar:

Cascading Stylesheet:

display: -moz-inline-block;

[Fuzzillogic]

Vergeet je ook de andere browsers niet? display: inline-block; werkt eigenlijk alleen niet in Gecko, maar (zelfs) wel in IE. Je hebt nu wel display: -moz-inline-block; voor Gecko, maar dat is een 'experimentele' property. Als het doet wat je wilt in Gecko, prima, maar mijn ervaring is dat het bijzonder buggy is.

Waarom doe je niet iets in de vorm van

Cascading Stylesheet:

display: block; 
float: left;
text-align: center;