Question

我在将HTML月份输入字段中的文本居中时遇到麻烦。这是我的HTML / CSS的简化版本，用于演示此问题：

如果运行它，您会发现它没有居中-如果尝试“ text-align：right”，它也不会一直向右移动。确实有两种选择都可以移动，这很奇怪。

知道为什么会这样吗？

 <!DOCTYPE html>
    <html>
    <head>
    <title>Page Title</title>
    <style>
    body {
        font-family: Helvetica;
        font-size: 14px;
        position: relative;
        text-align: center;
    }
    .monthSelector{
        display: inline-block;
        text-align: center;
        width: 250px;
    }
    </style>
    </head>
    <body>

    <input disabled type="month" class="monthSelector" min="2017-01" max="2099-12" value="2018-01">

    </body>
    </html>

这对我来说是这样：您可以看到文本不在输入框中居中。

Answer 1

由于呈现input type="month"的方式，因此无法按预期工作。

如果删除禁用的属性，您将看到（取决于浏览器）右侧有一些箭头和插入符号。考虑到这些因素，您的文字就显得呆滞了。

您需要添加此CSS

input[type=month]::-webkit-calendar-picker-indicator, 
input[type=month]::-webkit-inner-spin-button {
    display: none;
    -webkit-appearance: none;
}

et voila

编辑：

您可以使用:disabled CSS选择器，以免影响您的其他输入

input[type=date]:disabled::-webkit-calendar-picker-indicator,
input[type=date]:disabled::-webkit-inner-spin-button {
    -webkit-appearance: none;
    display: none;
}

Answer 2

当您将其设为month类型时，是由于存在默认的输入控件（但由于禁用了输入而不可见）引起的。输入文本相对于输入宽度减去控件的宽度居中。解决该问题的一种方法是为他们提供手动选择的margin，以使文本在视觉上居中。

    <!DOCTYPE html>
    <html>
    <head>
    <title>Page Title</title>
    <style>
    body {
        font-family: Helvetica;
        font-size: 14px;
        position: relative;
        text-align: center;
    }
    .monthSelector{
        display: inline-block;
        text-align: center;
        width: 250px;
        box-sizing:border-box;
    }
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: -15px; /* <-- Apparently some margin are still there even though it's hidden */
}
    </style>
    </head>
    <body>

    <input disabled type="month" class="monthSelector" min="2017-01" max="2099-12" value="2018-01">

    </body>
    </html>

Answer 3

@Daut对month输入中隐藏元素的呈现给出了很好的解释。

您可以采用该解决方案，但这会带来另一个挑战。现在，您必须确保CSS具有足够的属性以在所有浏览器中正确呈现。然后，您通常会使用polyfill或将输入类型标记为text。

如何将月份输入字段的内容居中？

3 个答案: