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

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>

这是对齐右。试一试:

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

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

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

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

有一个Chrome的部分解决方案:

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

它会将所选选项居中，但不会将下拉列表中的选项居中。

简单的方法: 使用padding-left

select{
   padding-left:2rem
}

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>