Home/ Questions/Q 667869
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T23:58:34+00:00

I need help to align CSS buttons. I tried many different variations and I

  • 0

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:

alt text
(source: front-end-developer.net)

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    .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/

    • 0