CSS problem: Combination of "text-align: center" and "min-width" not working in IE 7/IE 8 compat mode
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 thi开发者_如何学Gos:
But on Firefox it looks like this:
As you can see, the text is not correctly centered in IE 7.
Any ideas on how to solve this?
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.
Try this:
input.navbutton
{
text-align: center;
min-width: 100px;
align:center;
}
In IE (old), align affects the text too.
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 ..
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.
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
Try margin: 0 auto; in your CSS. I know this centers text for <div> tags but I don't know about buttons.
try changing you CSS to this:
input.navbutton
{
text-align: center;
min-width: 100px;
}
加载中,请稍侯......
精彩评论