CSS sliding-door buttons center alignment

Question

Hi guys,

I need help to align CSS buttons. I tried many different variations and I just cannot center my button the way I want.

Firstly, have a look at this url: http://www.front-end-developer.net/cssbuttons/example.htm

I'm using 2 images to form a button (this could be done on 1 image, but in this case we've got two). Everything works as expected as long as we apply float:left or float:right to the parent div element, to 'limit' width of the div and close it as soon as the content of the div ends. You can remove float:left from the button to see what I mean.

But what about center positioned buttons? I cannot add float:left/right because I want align it in the middle.

In theory, I could set

{
    width:XXpx;
    margin:0 auto;
}

And I will get what you can see on this picture:

But I don't know the length of the text inside. Having different translations my button can be very short, or 5 times that long.

I also tried to use <span> instead of <div>, but unfortunately nested inline elements don't respect their padding correctly...

And yes, I must use <a> inside, so buttons can be accessed by web crawlers.

I'm really stuck on this one.

Answer 1

.button {display:inline-block;}

Seems to do the trick.

inline-block browser-support: http://www.quirksmode.org/css/display.html

More about how to work around the browser issues related to inline-block: http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/