Chrome won’t center button using auto margins

Note: I’m not American, but it feels weird writing ‘centre’ if you code in CSS all day.

I’ve come across a problem I need solving and Google is not being my friend. I need to center a button on the page without specifying its width, because the text inside is of various lengths. The following works how I want in Firefox, Safari, Opera and even IE6, 7 and 9 (thanks to Sarah for testing).

button {
    display: block;
    margin: 0 auto;
}

It doesn’t work in Chrome (and less importantly IE8, I don’t have IE9 to test). Can anyone help me out? Is it a bug with Chrome or are the other browsers interpreting the specification wrong?

I’ve had a couple of suggestions so far:

1. Set a width – this is obviously the way to solve the auto margin as the element should have a width. I don’t want to explicitly set the width of each button though.

2. Add text-align: center; to the containing element – not sure about this as each container hold multiple elements and I’d have to override all non-buttons with text-align: left;

My final fix

The quickest way to fix this is to add a width to each button. Looking for CSS hacks that would target only Chrome, all I could find was one that would include Safari 3+. I don’t want to add extra widths for Safari when it can cope just fine with using margin auto on buttons.

So I’m going to add a few lines of Javascript that will add a new stylesheet, containing the button widths, for Chrome only. It’s a browser sniff, but I’m ok with that as I’m fixing a specific bug to Chrome.

/* fix chrome auto margin bug on button elements */
var bugCSS = '<link href="bug.css" rel="stylesheet"/>'
if(navigator.userAgent.toLowerCase().indexOf('chrome') > -1)
    document.write(bugCSS);
Emma Sax

Posted by Emma Sax

CSS

Comments

Comments are currently closed