ansaurus

Question

Simple CSS issue: Text wont center in a button

Answer 1

+1 A:

What about:

<input type="button" style="width:24px;" value="A"/>

gmcalab 2010-05-21 15:25:46

Answer 2

+2 A:

Testing this in Chrome, you need to add

padding: 0px;

To the CSS.

Tejs 2010-05-21 15:27:20

IE instills its own padding on buttons (thanks Windows). Button formatting is annoying because it takes on OS and browser specific formatting. It's the same reason you can adjust the size of `<input type="text">` or style buttons in browsers in Safari. You would do well to remember to always use a CSS reset.

dclowd9901 2010-05-21 15:34:54

This didn't occur to me. Thank you, worked as expected for Chrome! Although it did unfortunately cause Firefox to now be a little off center.

gbhall 2010-05-21 15:40:26

Actually if anyone else has this problem here is the fix that works consistent across IE, FF and Chrome:<pre>padding:0 3px 0 3px; /* Purely for IE, however doesn't affect Firefox. Chrome requires 0 */</pre><code>-webkit-padding-start: 0;</code>

gbhall 2010-05-21 15:54:09

@gbhall - seems like a lot of work to just get some text centered on a button, when if you would use `<input type="button" style="width:24px;" value="A"/>`, it would just work.

gmcalab 2010-05-21 16:25:42

@gmcalab - that actually wont work in Chrome. It's putting padding into the left side of the button, and why this particular CSS fix is required.

Tejs 2010-05-21 17:28:27

@Tejs - `<input type="button" style="width:24px;" value="A"/>` works in all browsers. He was using `<button type="button" style="width:24px;" value="A"/>` where I am using `<input>`

gmcalab 2010-05-21 17:42:56

Answer 3

A:

Usualy, your code should work...

But here is a way to center text in css:

.text
{
    margin-left: auto;
    margin-right: auto;
}

This has proved to be bulletproof to me whenever I want to center text with css.

Zwik 2010-05-21 15:28:58

Answer 4

A:

The problem is that buttons render differently across browsers. In Firefox, 24px is sufficient to cover the default padding and space allowed for your "A" character and center it. In IE and Chrome, it does not, so it defaults to the minimum value needed to cover the left padding and the text without cutting it off, but without adding any additional width to the button.

You can either increase the width, or as suggested above, alter the padding. If you take away the explicit width, it should work too.

JN Web 2010-05-21 15:31:39

ansaurus

tags:

views:

answers:

Simple CSS issue: Text wont center in a button

related questions