居中 iOS 的 HTML 输入字段答案

【问题标题】：Centering HTML input field for iOS居中 iOS 的 HTML 输入字段
【发布时间】：2014-05-04 13:19:59
【问题描述】：

我正在尝试使输入字段（而不是占位符）的值居中。不知何故，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/

【问题讨论】：

标签： html ios css input time

【解决方案1】：

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

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

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

因此，显式设置显示属性将使您在幕后松了一口气。只需将 display 属性设置为 inline-block 或 block 即可获得其宽度或对齐方式。

仅供参考，大多数浏览器应该将输入元素的显示属性渲染为inline-block。这是一个快速参考：default css for html elemnts。

【讨论】：

【解决方案2】：

display: block;

做了魔法，无论出于何种原因，iOS 需要它，但桌面不需要它。如果有人有解释，我很高兴听到它

【讨论】：