Center text on button
Chris Seidel
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.
Ben C
> 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.
Chris Seidel
> 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!