我试过这个:http://jsfiddle.net/ilyaD/KGcC3/

HTML:

<select name="state" class="ddList">
    <option value="">(please select a state)</option>
    <option class="lt" value="--">none</option>
    <option class="lt" value="AL">Alabama</option>
    <option class="lt" value="AK">Alaska</option>
    <option class="lt" value="AZ">Arizona</option>
    <option class="lt" value="AR">Arkansas</option>
    <option class="lt" value="CA">California</option>
    <option class="lt" value="CO">Colorado</option>
</select>

CSS:

select { width: 400px; text-align: center; }
select .lt { text-align: center; }

如你所见,它不起作用。是否有css唯一的方法来居中选择框中的文本?


当前回答

我总是用下面的方法让它只与css一起工作。

padding-left: 45%;
font-size: 50px;

填充将文本居中,可以调整文本大小:)

从验证的角度来看,这显然不是100%正确的,但它确实起作用了:)

其他回答

这招对我很管用:

text-align: center;
text-align-last: center;

如果你有一个文本长度相似的选项列表(例如页面选择),那么另一个“假”解决方案是:

padding-left: calc(50% - 1em);

这适用于Chrome、Firefox和Edge。这里的技巧是推送文本 从左边到中间,然后减去px, em或任何选项文本长度的一半。

最佳解决方案IMO(在2017年)仍然是通过JS替换选择,用div或其他东西构建自己的假选择框,并绑定单击事件,以获得跨浏览器支持。

它还不是100%,但您可以使用这个片段!

text-align-last:中心;// Chrome浏览器 text-align:中心;// Firefox

目前在Safari或Edge上不工作!

这是对齐右。试一试:

select{
    text-align-last:right;
    padding-right: 29px;
    direction: rtl;
}

浏览器对文本对齐-最后属性的支持可以在这里找到:https://www.w3schools.com/cssref/css3_pr_text-align-last.asp 看起来只有Safari还不支持它。

2020年,我使用:

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