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

$('#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;
    }
});

在你的选择使用宽度:自动和无填充来查看你的文本有多长。 我在我的选择上使用100%的可用宽度，所有的选项都有相同的长度，这允许我使用非常简单的css。

text-indent将从左边移动文本，类似于左填充 120px是我的文本长度-我想把它居中，所以取一半的大小和一半的选择大小，留下50% - 60px

select{
  width: 100%;
  text-indent: calc(50% - 60px);
}

如果我有不同大小的选项呢?

然而，解决方案可能并不完美。 如果选项之间的差异不像5个字符，那么前一种解决方案可能会让你非常接近居中。

如果你仍然需要更精确的居中，你可以这样做

准备这门课:

.realWidth{
   width: auto;
}

应用onChange监听器选择元素 在该监听器中，将.realWidth应用到select元素with

const selectRef = document.getElementById("yourId");
selectRef.classList.add("realWidth");

获取期权的实际宽度。

const widthOfSelect = selectRef.getBoundingClientRect().width / 2;

widthOfSelect是你要找的宽度。存储在全局/组件变量中。 删除realWidth，你不再需要它了。

selectRef.classList.remove("realWidth");

我正在使用react，我不确定这将在香草工作，如果不是你必须找到另一个解决方案。

<select style={`textIndent: calc(50% - ${widthOfSelect}) %`}> ... </select>

另一个解决方案，然而，这是一个坏的一个可以创建CSS类与js和把它放在头部。

优点:

可能有用，我还没试过动态解决方案，但应该有用。

缺点:

如果程序不够快，用户将看到width: auto发生，因此想知道发生了什么。如果是这种情况，只需创建重复的select，将它隐藏在具有更高z-index的东西后面，并将on select侦听器应用于原始的隐藏副本。 可能很难使用，如果你不能内联的风格，因为香草的限制，但你可以做一个脚本来优化appendChild的头部。

试试这个:

select {
    padding-left: 50% !important;
    width: 100%;
}

虽然你不能将选项文本居中，但你可以在选择的顶部放置一个绝对定位的div，以达到同样的效果:

#centered
{
  position: absolute;
  top: 10px;
  left: 10px;
  width: 818px;
  height: 37px;
  text-align: center;
  font: bold 24pt calibri;
  background-color: white;
  z-index: 100;
}

#selectToCenter
{
  position: absolute;
  top: 10px;
  left: 10px;
  width: 840px;
  height: 40px;
  font: bold 24pt calibri;
}

$('#selectToCenter').on('change', function () {
    $('#centered').text($(this).find('option:selected').text());
});

<select id="selectToCenter"></select>
<div id="centered"></div>

确保div和select在文档中的位置是固定的。

是的，这是可能的。您可以使用text-align-last

text-align-last: center;

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>