Centering an input button in CSS on Google Chrome for Mac_问答_开发者

Centering an input button in CSS on Google Chrome for Mac

开发者 https://www.devze.com 2023-01-23 21:20 出处：网络

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 doe

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.