Html 文本对齐：选择中的居中占位符文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35654636/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
text-align: center placeholder text in select
提问by DigM
I have a drop down list which has placeholder text. In other browsers, I have been able to center this placeholder text but in Chrome, text-align:center
我有一个包含占位符文本的下拉列表。在其他浏览器中，我已经能够将此占位符文本居中，但在 Chrome 中， text-align:center
Here is the HTML for the Select:
这是 Select 的 HTML：
.bookingform::-webkit-input-placeholder {
/* WebKit, Blink, Edge */
color: #FFF;
font-size: 18px;
font-family: "Raleway";
text-align: center;
}
.bookingform:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #FFF;
opacity: 1;
font-size: 18px;
font-family: "Raleway";
text-align: center;
}
.bookingform::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #FFF;
font-size: 18px;
font-family: "Raleway";
opacity: 1;
text-align: center;
}
.bookingform:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: #FFF;
font-size: 18px;
font-family: "Raleway";
text-align: center;
}
.bookingform:placeholder-shown {
/* Standard (https://drafts.csswg.org/selectors-4/#placeholder) */
color: #FFF;
font-size: 18px;
font-family: "Raleway";
text-align: center;
}<select name="number-of-adults" class="wpcf7-form-control wpcf7-select" aria-invalid="false">
<option value="ADULTS*">ADULTS*</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>So is there something that I am missing? All of my other text inputs have their placeholders aligned to the center and the drop down boxes are aligned to the center on other browsers like Firefox.
那么有什么我想念的吗？我所有其他文本输入的占位符都与中心对齐，下拉框与其他浏览器（如 Firefox）的中心对齐。
回答by G-Cyrillus
Is thiswhat you are trying to do ?
是该你正在尝试做什么？
select {
text-align: center;
text-align-last: center;
/* webkit*/
}
option {
text-align: left;
/* reset to left*/
}<select name="number-of-adults" class="wpcf7-form-control wpcf7-select" aria-invalid="false">
<option value="ADULTS*">ADULTS*</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<select name="number-of-adults" class="wpcf7-form-control wpcf7-select" aria-invalid="false">
<option value="ADULTS*">ADULTS*</option>
<option value="1" selected="true">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>This is partially supported by browsers (issues, at least, in Edge and Safari)
浏览器部分支持此功能（至少在 Edge 和 Safari 中存在问题）
