Notice: The devs are no longer actively involved in the forum, so any bug reports regarding the Stylish extension or this website should be sent to them directly at
Changing your Avatar.
The only way to currently change a forum avatar is through The email address used for your account must be one of the email addresses that is registered to your Gravatar account.

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="'92289416',true);return false;" class="gmbutton2 gmvotefair">Fair</a> <a href="#" onclick="'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.