Centering an input button in CSS on Google Chrome for Mac
I'm trying to center input fields and buttons ( tags) in an html form. I'm doing that with auto left and right margins. That works fine on most browsers but doesn't centre on Chrome for Mac (it does on Chromium for Linux):
<html>
<body>
<form style="width: 300px; display: block; text-align: center; background: red;">
<input value="Centre" type="submit" style="display: block; margin: 10px auto; background: green;" />
</form>
</bo开发者_开发问答dy>
</html>
I expect to see the button centered within the form but on Chrome Mac I see it on the left hand side. If I give it an explicit width the button centers, or if I use another form element like a textarea, but those aren't very satisfactory solutions.
Remove the display block from the button;
<html>
<body>
<form style="width: 300px; display: block; text-align: center; background: red;">
<input value="Centre" type="submit" style=" margin: 10px auto; background:none; border:none; background-color:green;" />
</form>
</body>
</html>
try this.
精彩评论