选择选项的水平文本中心答案

【问题标题】：Horizontally text center for select option选择选项的水平文本中心
【发布时间】：2013-11-05 13:55:56
【问题描述】：

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

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

如何才能居中？

【问题讨论】：

标签： html css

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

你可以使用

select {
    text-align: center;
}

查看修改后的JSFiddle

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

select {
    padding-left: 20px;
}

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

【讨论】：

这很明显没有像 OP 中所要求的那样给出“
@ColtMcCormack 您很明显使用的浏览器与我不同。例如。 Chrome 不支持select 或option 中的text-align。在那里，你必须使用像padding-left 这样的组合。我不能说 IE 或 Opera，因为我不使用任何一个。
@OlafDietsche 我相信该修复程序确实仅适用于 Firefox，使其适用于一小部分 Web 客户端（根据几个不同的来源，在撰写本文时为 10-25%）。我唯一的疑虑是最初的答案似乎表明它总是有效的，这可能会让尝试它的 CSS 初学者感到困惑。既然您已经澄清这仅适用于 FF，我已经删除了我的 TD（谢谢！）。顺便说一句，这不起作用的原因是因为 text-align 只影响内联元素，而
Chrome 将支持 text-align-last 的 <select> 标签，但不支持 <option> 标签。

【解决方案3】：

不要使用

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

或

select {
    text-align: center;
}

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

【讨论】：

【解决方案4】：

查看此链接：

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

【讨论】：