时间戳

首页 > 解决方案 > HTML -webkit-center 问题

html - HTML -webkit-center 问题

问题描述

我写了一些代码，我意识到有一个问题。当我在 中使用-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>

标签： htmlcsswebkit

解决方案

- webkit-center 属性的工作方式与普通的 text-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>

推荐阅读