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);

}

结果应该是一个黄色的方框，其中包含以中心为中心的时间，在iOS设备上它不起作用。

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

Answer 1

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

内联元素不能具有宽度，因此无法将文本与右侧或中心对齐。

因此，在您的情况下，浏览器默认为display属性的inline值将具有对齐效果。但是，哪个浏览器默认为inline-block值。

因此，明确地设置显示属性将使您在场景后面得到缓解。只需将显示属性设置为inline或inline-block即可获得宽度或对齐方式。

仅供参考，大多数浏览器应将input元素的display属性呈现为block。这是一个快速参考：default css for html elemnts。

Answer 2

display: block;

无论出于什么原因，iOS都需要它，而不是台式机。

如果某人有言论，我很乐意听到它

为iOS中心HTML输入字段

2 个答案: