我试过这个:http://jsfiddle.net/ilyaD/KGcC3/
HTML:
<select name="state" class="ddList">
<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>
CSS:
select { width: 400px; text-align: center; }
select .lt { text-align: center; }
如你所见，它不起作用。是否有css唯一的方法来居中选择框中的文本?
如果你没有找到任何解决方案，你可以在angularjs上使用这个技巧，或者使用js将选中的值与div上的文本映射，这个解决方案在angular上完全符合css，但需要在select和div之间进行映射:
var myApp = angular.module('myApp', []);
myApp.controller('selectCtrl', ['$scope',
function($scope) {
$scope.value = '';
}
]);
.ghostSelect {
opacity: 0.1;
/* Should be 0 to avoid the select visibility but not visibility:hidden*/
display: block;
width: 200px;
position: absolute;
}
.select {
border: 1px solid black;
height: 20px;
width: 200px;
text-align: center;
border-radius: 5px;
display: block;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-guide-concepts-1-production</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-app ng-controller="selectCtrl">
<div class=select>
<select ng-model="value" class="ghostSelect">
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
</select>
<div>{{value}}
</div>
</div>
</div>
</body>
希望这可以对某人有用，因为我花了一天时间在phonegap上找到这个解决方案。
在你的选择使用宽度:自动和无填充来查看你的文本有多长。
我在我的选择上使用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的头部。
我也遇到过类似的问题。
我的解决方法是在样式部分更改为固定大小的字体:
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>
