水平文本中心选择选项

Question

我有这个简单的fiddle标准<select> html元素，我要做的就是为<option>标记提供中心对齐。

我已经尝试text-indent: 20px，但它的中心只是select！中的可见标记！

我怎样才能让它居中？

Answer 1

解决方案1： （一个简单的解决方案）

select {
   ...    
   padding: 0 0 0 20px;
}

<强> DEMO 1

解决方案2： （已添加27-10-2017）
只有选定的数字才会居中。
* 可能还不支持Safari

select {
   ...
   text-align: center;
   text-align-last: center;
}

<强> DEMO 2

Answer 2

你可以使用

select {
    text-align: center;
}

请参见修改后的JSFiddle

不幸的是，这仅适用于Firefox。对于Chrome，您必须使用类似于@ CTravel解决方案的padding-left

select {
    padding-left: 20px;
}

修改后的JSFiddle

但这不适用于Firefox中的option元素，因此这也不是跨浏览器的解决方案。

Answer 3

不要使用

select {
   ...    
   padding: 0 0 0 20px;
}

或

select {
    text-align: center;
}

他们不参与选择。 也许你可以使用JQuery的选择样式：JQuery UI Select

Answer 4

检查此链接：

http://filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/

如其他地方所述，使用普通CSS是不可能的。 （无论如何不适用于所有浏览器）