html - 选择选项的水平文本中心

Question

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

我已经尝试过了text-indent: 20px，但它的中心只有选择中的可见标签！

我怎样才能把它居中？

score 12 · Accepted Answer

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

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

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

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

score 4 · Accepted Answer

你可以使用

select {
    text-align: center;
}

查看修改后的 JSFiddle

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

select {
    padding-left: 20px;
}

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

score 2 · Accepted Answer

不要使用

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

或者

select {
    text-align: center;
}

他们没有在选择中工作。也许你可以使用 JQuery 的选择风格：JQuery UI Select

score 1 · Accepted Answer

检查此链接：

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

4 回答 4