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

Hi Göksel ÖZER

Вы можете попробовать использовать приведенный ниже код, чтобы поэкспериментировать с некоторыми другими функциями и тегами HTML для этого типа сценария ios. Это будет включать разделение встроенный стиль и включить его в тег в разделе заголовка HTML или, если возможно, сохранить его в отдельном файле CSS в включить его в заголовок html файл также для лучших практик.

Я любезно приглашаю вас начать копать больше о fantasti c мире CSS, пожалуйста, посмотрите по этой ссылке для получения дополнительной информации об этом удивительном мире.

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>

Answer 2

-свойство 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>