居中HTML输入字段为iOS

Question

我试图将输入字段的值居中(而不是占位符)。不知何故，iOS无法"识别"居中，但firefox、safari和chrome可以。

HTML

<input type="time" value="12:00">

CSS

input {
  background-color: lightyellow;
  border: none;
  outline: none;
  text-align: center;
  width: 200px;
  padding: 5%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-background-clip: border-box;
  -webkit-background-origin: padding-box;
  -webkit-background-size: auto;
  -webkit-box-shadow: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

结果应该是一个黄色的框，包含时间12:00居中，在iOS设备上不起作用。

这是一个jsfiddle: http://jsfiddle.net/y9TPM/4/

Answer 1

输入元素神秘。有些浏览器设置了显示属性的inline-block值，有些浏览器设置了inline值。

并且内联元素不能有宽度，因此它不能将文本对齐到右边或中间。

因此，在您的情况下，浏览器默认为显示属性的inline-block值将具有对齐效果。但是不知道哪些浏览器默认使用inline值。

因此，显式地设置display属性将使您在幕后轻松。只需将显示属性设置为inline-block或block，以显示其宽度或对齐方式。

供参考，大多数浏览器都应该将input元素的display属性渲染为inline-block。这里有一个快速参考:html元素的默认css

Answer 2

display: block;

发挥了神奇的作用，不管出于什么原因，它只适用于iOS，而不适用于台式机。如果有人有解释我很乐意听