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>

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

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: 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

select{
   padding-left:2rem
}

不完全是居中，但是使用上面的例子，你可以在选择框中设置左边边距。

<style>.UName { text-indent: 5px; }</style><br>

<select  name="UserName" id="UserName" size="1">
    <option class="UName" selected value="select">Select User</option>
    <option class="UName" value="User1">User 1 Name</option>
    <option class="UName" value="User2">User 2 Name </option>
    <option class="UName" value="User3">User 3 Name</option>
</select>

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

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

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

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