如何在 <option> 元素中居中文本？ [复制]答案

【问题标题】：How do I center text in the <option> element? [duplicate]如何在 <option> 元素中居中文本？ [复制]
【发布时间】：2014-10-18 07:13:38
【问题描述】：

我想在使用时使文本居中：。我将自定义为一个漂亮的矩形按钮，但文本向左对齐，我不知道如何在 CSS 中定位它，所以我可以将它居中。

到目前为止我已经尝试过：

 option { text-align:center; }

和

 option[value=0] { text-align:center }

不走运..

这是我目前所拥有的：

http://jsfiddle.net/xtsx68pf/

我需要使文本居中。如何使用 option > 元素做到这一点？

【问题讨论】：

不幸的是，<select> 元素的外观在某种程度上受到操作系统的严格控制。如果您想要灵活性和可定制性，您可能想要探索基于 JS 的替代品，例如 Select2。
请阅读：stackoverflow.com/questions/10813528/…

标签： css

【解决方案1】：

很遗憾，不，没有只使用 CSS 的跨浏览器解决方案。我相信文本居中确实适用于 Firefox。

你可以像这样做一个左边距：

select {
  text-indent: 10px;
}

但这可能不符合您的要求。

您还可以查看风格化选择元素的插件。

【讨论】：

【解决方案2】：

试试这个

select, option {
padding-left: 30px;
}

小提琴Here

【讨论】：

【解决方案3】：

类似于 eBrian 所说的，但尝试使用百分比。

    select {
width:106px;
height:40px;
border:0;
background-color:#eee;
color:grey;
font-size:14px;
-webkit-appearance:none;
outline:none;
border-radius:0;
**text-indent: 25%;**

看起来还不错

【讨论】：