select { text-align: center; text-align-last: center; } option { text-align: left; } <select> <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>

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

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

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

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

这招对我很管用:

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

如果选项是静态的，则可以监听选择框上的更改事件，并为每个单独的项添加填充

$('#id').change(function() {
    var select = $('#id');
    var val = $(this).val();

    switch(val) {
        case 'ValOne':
            select.css('padding-left', '30px');
            break;
        case 'ValTwoLonger':
            select.css('padding-left', '20px');
             break;
        default:
            return;
    }
});

我遇到了这样一个问题，一个客户坚持这样做，他们用的是Mac和iPhone。

我最终使用了媒体查询和填充左侧的百分比填充。这是一个令人满意的解决方案吗?完全没有，但这让我开始了新的生活。

简单的方法: 使用padding-left

select{
   padding-left:2rem
}