text-align:center showing no effect when display:inline-block
Hello,
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:
And the CSS of the first and second element concerned, as displayed by Firebug.
Thanks already for any thoughts or suggestions.
~HKK
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.
~HKK
Comments