Question

我终生无法弄清楚如何在html5日期输入中居中显示文本。如您所见，我可以更改文本的颜色，但不能将其居中。我也尝试过在CSS中做多件事

input.element.text{text-align:center;/* dont work here */color:green;line-height: 30px;}/* change color but not align*/

input[type=date]{
line-height: 46px;
height: 30px;
width:300px;
text-align: center;/* dont work here */
text-align-last: center;
 color:red;/* used to test */
}

input[type=text]{ color:blue;/* used to test */
text-align: center;/* dont work here */
text-align-last: center;
 
}

<input type="date" name="dob" class="element" size="" maxlength="15" value="" type="text" placeholder="" required>

Answer 1

Input是一个内联元素，您可以将其显示更改为块，然后调用text-align，或者将其包装在div中，然后在div上调用text-align，以将内容放入其中。

默认情况下，分区具有阻止显示。

div{
text-align:center;
}
input.element.text{text-align:center;/* dont work here */color:green;line-height: 30px;}/* change color but not align*/

input[type=date]{
line-height: 46px;
height: 30px;
width:300px;
text-align: center;/* dont work here */
text-align-last: center;
 color:red;/* used to test */
}

input[type=text]{ color:blue;/* used to test */
text-align: center;/* dont work here */
text-align-last: center;
 
}

<div><input type="date" name="dob" class="element" size="" maxlength="15" value="" type="text" placeholder="" required></div>

Answer 2

.bigbox{
    height:40px;
    line-height:40px;
    padding:0 5px;
}

Source: How to vertically align text in input type=“text”? [duplicate]

html5日期输入内的中心文本

2 个答案: