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

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

恐怕这在纯CSS中是不可能实现的，也不可能实现完全跨浏览器兼容。

然而，使用jQuery插件，你可以为下拉菜单设置样式:

https://www.filamentgroup.com/lab/jquery-ui-selectmenu-an-aria-accessible-plugin-for-styling-a-html-select.html

这个插件隐藏了select元素，并动态创建span元素等以显示自定义的下拉列表样式。我很有信心，你可以改变样式跨度等中心对齐的项目。

这招对我很管用:

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

我也遇到过类似的问题。 我的解决方法是在样式部分更改为固定大小的字体:

option {
  font-family: Courier New;
  width: 12ch;
  font-size: 14pt
}

select {
  font-family: Courier New;
  width: 14ch;
  font-size: 14pt
}

在body中，我用下划线填充所显示的选项，使它们具有相同的长度。 注意使用下划线两边的中心显示:

<select onchange='O.src=this.options[this.selectedIndex].value' align="center">
  <option value="" align="center">___(none)___</option>
  <option value="https://www.247backgammon.org/" align="center">_Backgammon_</option>
  <option value="https://www.247klondike.com/klondikeSolitaire3card.php" align="center">__Klondike__</option>
  <option value="https://www.247minesweeper.com/" align="center">_Minesweeper</option>
  <option value="https://sudoku.com/" align="center">
    <p>___Soduku___</p>
  </option>
</select>

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

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

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

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

在你的选择使用宽度:自动和无填充来查看你的文本有多长。 我在我的选择上使用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的头部。