css - 输入字段对齐

Question

我有一个必须在页面中心对齐的电子邮件输入字段。我试过使用对齐，但它不会对齐输入字段。我可以对齐输入字段中的文本，但不能对齐物理输入字段。

标签： css

Answer 1

"input" element is inline-element.
<div>
  <input type="email" style="text-align:center" value="text is center"/>
</div>

this align the text in the input field.
you should be put style to parent.

<div style="text-align:center">
  <input type="email" value="input box is center"/>
</div>

of course - "input" element should inline type.
if you changed "input" element's display type
try to other way. 

<div>
  <input type="email" style="display:block;margin:0 auto;" value="input box is center"/>
</div>
or 
<div style="display:flex;justify-content:center;">
  <input type="email" style="display:block;" value="input box is center"/>
</div>