5

Here is my html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
    input.navbutton
    {
        text-align: center;
        min-width: 100px;
    }
</style>
</head>
<body>
    <input type="submit" class="navbutton " value="Next" />
</body>
</html>

On IE 7, this ends up looking like this:

alt text

But on Firefox it looks like this:

alt text

As you can see, the text is not correctly centered in IE 7.

Any ideas on how to solve this?

2
  • 1
    Bumped into the same problem today. Can't find a reasonably acceptable solution... have you?
    – Peter
    Jun 15, 2011 at 12:54
  • Adding line-height seems to work. See my answer below for a full example.
    – Pluto
    Oct 1, 2015 at 19:39

7 Answers 7

2

min-width on a button already doesn't work in IE6/7 (it won't expand the button at all when the text is larger, as you seem to expect). Replace it by width and live with it.

2
  • min-width is supported by IE 7 (not IE 6), but appearantly it is a bit buggy. The behavior is correct in IE 8 (non-compat mode) msdn.microsoft.com/en-us/library/ms530820(VS.85).aspx
    – einarq
    Feb 10, 2010 at 14:01
  • 1
    D'oh. I literally said min-width on a button. Try and see yourself before headlessly downvoting :/
    – BalusC
    Feb 10, 2010 at 14:05
1

Try this:

input.navbutton
{
    text-align: center;
    min-width: 100px;
    align:center;
}

In IE (old), align affects the text too.

1
  • Thanks for the suggestion, but no dice I'm afraid.
    – einarq
    Feb 10, 2010 at 14:00
1

Nice bug your caught there einarq..

It could be related to the min-width bug : http://social.msdn.microsoft.com/Forums/en/iewebdevelopment/thread/e54188ad-cdad-4168-bbf9-2d0b5271676d

The only viable workaround i can see is to drop the min-width and add left and right paddings ..

1

Took me a while to figure it out, but I finally got it. A combination of three properties need to be used:

input.navbutton {
    min-width: 100px;
    overflow: visible;
    line-height: 120%;
}

Your text will be centered automatically. line-height can be excluded if you're aligning your text to the left or right. See this jsfiddle for a full example.

Example shown in IE7

0

this was a big problem for me but I've got a solution

input.navbutton
{
    text-align: center;
    min-width: 100px;
    margin: auto;
}

adding auto will turn the text back to place.

it worked for me on IE

-1

Try margin: 0 auto; in your CSS. I know this centers text for <div> tags but I don't know about buttons.

-1

try changing you CSS to this:

    input.navbutton
    {
            text-align: center;
            min-width: 100px;
    }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.