Question

我想在使用时将文本居中：＆lt;选择＆gt; ＆LT;选项＆gt; 。我定制＆lt;选择＆gt;一个漂亮的矩形按钮，但文本与左边对齐，我不知道如何在CSS中定位它，所以我可以集中它。

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

 option { text-align:center; }

和

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

没有运气..

这是我到目前为止所做的：

http://jsfiddle.net/xtsx68pf/

我需要将文本置于中心位置。我怎么用＆lt; 选项＆gt;元件？

Answer 1

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

你可以这样做左边距：

select {
  text-indent: 10px;
}

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

您还可以查看程式化选择元素的插件。

Answer 2

试试这个

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

小提琴Here

Answer 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%;**

好像看起来不错

如何将文本置于<option>元素中？</option>

3 个答案: