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 属性与普通文本中心属性的工作方式不同。 block 不是对齐内容，而是尝试对元素进行排序。

我通过不同的造型得到了相同的外观。你可以控制它。对于每个输入，您都需要键入媒体查询才能响应，因为您给出了恒定的宽度值。

#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>

Answer 2

你好 Göksel ÖZER

您可以尝试使用下面的代码来试验一些其他功能，这种 scenarios.This 类型的 HTML 标签将包括分离内联样式和 include it in a tag in the head section of the HTML or if possible, save it in a separated CSS file to include it on the head of the html 文件最佳实践。

我诚挚地邀请您开始更多地了解 CSS 的奇妙世界，请查看 this link 以了解有关这个奇妙世界的更多信息。

input[type=button], input[type=submit], input[type=reset] {
  background-color: #9F9F9F;
  border: 2px solid gray;
  color: white;
  padding: 0 10px;
  text-decoration: none;
  margin: 4px;
  cursor: pointer;
}

#mainDiv {
text-align: center;
text-align: -moz-center;
text-align: -webkit-center;
display: inline-grid;
width:55%;
border-style:double;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -1%);
}

.header{
color:#A9A9A9 !important;
margin-bottom: 5px;
}

#button {
height:30px;
width:173px;
margin:20px;
}

textarea {
width:174px !important;
height:50px !important;
padding: 0;
border: 1px solid #ccc;
text-align: center;
text-align: -moz-center;
text-align: -webkit-center;
    }
    

.myinputs {
height:20px;
line-height:20px;
width:173px;
text-align: center;
text-align: -moz-center;
text-align: -webkit-center;
}

<div id="mainDiv">
<h4 class="header">HEADER</h4>
<input name="header" type="text" id="header" class="myinputs">
<h4 class="header">CONTENT</h4>
<input name="content" type="text" id="content" class="myinputs">
<h4 class="header">HEADER COLOR</h4>
<input name="headColor" type="text" id="headColor" class="myinputs">
<h4 class="header">CONTENT COLOR</h4>
<textarea class="header">
</textarea>
<input type="submit" name="button" value="SUBMIT" id="button">
</div>

HTML -webkit-center 问题

HTML -webkit-center issue

html

css

webkit