HTML -webkit-center问题

Question

我写了一些代码，但我意识到有问题。当我使用-webkit-center并在textbox中写一些东西时，所有项目都在右边。我尝试了其他-webkit对齐设置，但仅-webkit-center没问题。我对此进行了研究，但找不到任何东西。谁能解释原因？

这里是您也可以尝试的代码。

<div id="mainDiv" style="text-align: -webkit-center; display: inline-grid; margin-left: 40%;border-style:double;">
<span>HEADER</span>
<input name="header" type="text" id="header" style="margin: 20px;width:173px;">
<span>CONTENT</span>
<input name="content" type="text" id="content" style="margin: 20px;height:50px;width:350px;">
<span>HEADER COLOR</span>
<input name="headColor" type="text" id="headColor" style="margin: 20px;width:173px;">
<span>CONTENT COLOR</span>
<input name="contColor" type="text" id="contColor" style="margin: 20px;width:173px;">
<input type="submit" name="button" value="SUBMIT" id="button" style="height: 30px;width:173px;margin:20px;">
</div>

Answer 1

-webkit-center属性的工作方式与普通text-center属性不同。块不尝试对齐内容，而是尝试对元素进行排序。

通过不同的样式，我得到了相同的外观。您可以控制它。对于每个输入，您将需要输入媒体查询来响应，因为您提供了恒定的宽度值。

#mainDiv {
  display: flex;
  flex-direction: column;
  align-items: center;
}

<div id="mainDiv" style=" text-align: center;width: 40%; margin:auto;border-style:double;">
  <span>HEADER</span>
  <input name="header" type="text" id="header" style="margin: 20px;width:173px;">
  <span>CONTENT</span>
  <input name="content" type="text" id="content" style="margin: 20px;height:50px;width:350px;">
  <span>HEADER COLOR</span>
  <input name="headColor" type="text" id="headColor" style="margin: 20px;width:173px;">
  <span>CONTENT COLOR</span>
  <input name="contColor" type="text" id="contColor" style="margin: 20px;width:173px;">
  <input type="submit" name="button" value="SUBMIT" id="button" style="height: 30px;width:173px;margin:20px auto;">
</div>