Center text on button

Hi,

what css property must be set to center the text verticaly und horizontally
on a button (input type="button")?

I have tried text-align:"center", but this does not work.

Thank you.

On 2009-06-26, Chris Seidel <cseidel (AT) arcor (DOT) de> wrote:

Hi,

what css property must be set to center the text verticaly und horizontally
on a button (input type="button")?

Any support you get for CSS style on an <input> should be treated as
"experimental" according to CSS specs, so unless you want to be
experimented on don't rely on it.

I have tried text-align:"center", but this does not work.

Use <button> instead, because it's not a replaced element, but (where
supported and where Appendix D is followed) just a regular inline-block.

So you can centre vertically by setting a line-height equal to the
height you've set (caveat: don't allow text to wrap in the button) and
horizontally with text-align: center (although you often get that by
default anyway).

e.g.

button
{
width: 300px;
height: 200px; line-height: 200px;
text-align: center;
}

There probably is a way you can make it work with <input> but not
without some frobnication.

Ben C wrote:

Any support you get for CSS style on an <input> should be treated as
"experimental" according to CSS specs, so unless you want to be
experimented on don't rely on it.

Ah ok, thank you!