Firefox输入类型time text-align: center

Question

我想在Firefox中对齐输入类型为time的文本。以下代码可以在Chrome和Edge中运行，但不能在Firefox中运行：

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

input {
    text-align: center;
}

here is a codepen

Answer 1

即使不是完全正确的解决方案，您也可以尝试使用<div>元素作为<input>元素的父元素，并使用CSS将该<div>元素居中，如下所示。它可以在Firefox和Chrome上运行。

<div class="center">
  <input type="time" value="00:00">
</div>

.center {
  text-align: center;
}

Answer 2

这里有一个替代方案，可以实现相同的结果。将输入放在div中，并将div的文本居中。以下结果可在Chrome、Edge和Firefox上实现一致的显示：

​

input {
    border: none;
}

.container {
    border: solid 1px #ccc;
    text-align: center;
    width: 300px;
}

<div class="container">
        <input type="time" value="00:00">
</div>

​

Answer 3

它可以在任何浏览器上工作。

<div style = "text-align: center; width: 100px; padding: 50px;">
  <input type="time" value="00:00">
</div>

在Bootstrap：

<div class="container">
  <div class="row">
    <div class="col-md-12 text-center">
        <input type="time" value="00:00">
    </div>
  </div>
</div>