text-align:center showing no effect when display:inline-block

edited April 2009 in Style Development

though this may be a little off topic, i dont know where else to ask.
I just stumbled over a part in a website where there are two <a> elements next to each other, with some margin and padding and all, and both have their display porperties set to inline-block. In the "natural" look of the side, these links (they are buttons in this case) have images representing their text (with the actual text being text-indent:-300px), and everything's fine. In my style, I want to get rid of the image and use simple text instead (the actual text is there, i just set text-indent:0).
Like it was before, i want that text to be centered, however text-align:center shows no effect (i've checked specifity and all). After playing around a little I found out that this behaviour seems to be connected to the elements being inline-blocks -- when i change them to either inline or block, it works fine; however, in those cases, the rest of their layout gets messed up.
So I was wondering if any of you has run into a similar problem and knows anything about it?

I'll post some material here.
Before and after screenshot
Concerned HTML:<div class="critiquevotes"> <strong>What do you think?</strong> <div class="youthought"> <a href="#" onclick="Critique.vote.submit('92289416',true);return false;" class="gmbutton2 gmvotefair">Fair</a> <a href="#" onclick="Critique.vote.submit('92289416',false);return false;" class="gmbutton2 gmvoteunfair">Unfair</a> </div> </div>
And the CSS of the first and second element concerned, as displayed by Firebug.

Thanks already for any thoughts or suggestions.



Sign In or Register to comment.