How to center text in an inline-block span on lte firefox 2?

Question

I have 3 spans inside a div.

1. text-align:center isn't working (tried on the parent too)
2. text-align: -moz-center neither (on ff2)
3. i have to use spans
4. no floats
5. -moz-inline-box or -moz-inline-stack ?
6. with -moz-inline-block it's working but the 2nd and 3rd spans clear left…

Anyone got an idea? (fixing #6 is an alternative)

Answer 1

Just put some left and right padding on those spans?

So if you have something like this:

<div>
    <span>some text</span>
    <span>also some text</span>
    <span>again here comes some text</span>
</div>

Just use it like this in your css:

span{
padding:0 10px;
}

Result will be something like this:

http://i48.tinypic.com/5knczm.jpg

Note, i added 1px border, so you would see that text is "centered"...

Answer 2

EDIT:

div{
    width:80%;
    display:table;
}
span{
    width:33%;
    display:table-cell;
    text-align:center;
    border:1px solid #F00;
}

Note that both the div AND span width need to be changed to adjust widths. The span should be 100/(no of spans)% and the div whatever width you want.

Answer 3

HTML

replace <span>text</span> by <p><span>text</span></p>

CSS

p {display:-moz-inline-stack;text-align:center}
span {display:block}