是否可以在select框中居中文本？
我试试这个： 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的方式来select框中的文本？
恐怕这对于纯CSS来说是不可能的，而且不可能完全兼容跨浏览器。
但是，使用jQuery插件，您可以设置下拉菜单的样式：
这个插件隐藏了select元素，并创buildspan元素等，以显示一个自定义的下拉列表样式。 我相当有信心，你可以改变跨度等样式中心alignment的项目。
有一个Chrome的部分解决scheme：
select { width: 400px; text-align-last:center; }
它确实将选中的选项居中，但不包括下拉内的选项。
您必须将CSS规则放入select类中。
使用CSS文本缩进
例
<select class="day"> /* option 1 option 2 option 3 option 4 option 5 here */ </select>
CSS代码
select { text-indent: 5px; }
这是为了alignment。 尝试一下：
select{ text-align-last:right; padding-right: 29px; direction: rtl; }
这JSfunction应该为你工作
function getTextWidth(txt) { var $elm = $('<span class="tempforSize">'+txt+'</span>').prependTo("body"); var elmWidth = $elm.width(); $elm.remove(); return elmWidth; } function centerSelect($elm) { var optionWidth = getTextWidth($elm.children(":selected").html()) var emptySpace = $elm.width()- optionWidth; $elm.css("text-indent", (emptySpace/2) - 10);// -10 for some browers to remove the right toggle control width } // on start $('.centerSelect').each(function(){ centerSelect($(this)); }); // on change $('.centerSelect').on('change', function(){ centerSelect($(this)); });
完整的Codepen在这里： http ://codepen.io/anon/pen/NxyovL
我一直拿走下面的黑客来让它只与CSS工作。
padding-left: 45%; font-size: 50px;
填充将中心文本，可以调整文本大小:)
从validation的angular度来看，这显然不是100％正确的，但它确实是工作:)
不太集中，但使用上面的例子，你可以在select框中留下一个左边距。
<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>
你不能真正自定义<select>或<option> 。 唯一的方法（跨浏览器）将手动创build一个下拉与div和css / js创build类似的东西。
虽然不能将选项文本居中在select中，但是可以在select顶部放置一个绝对定位的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都具有固定的位置。
如果你没有find任何解决scheme，你可以在angularjs上使用这个技巧，或者使用js将选定的值与div上的文本进行映射，这个解决scheme是完全符合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>
只是使用这个：
select { text-align-last: center; padding-right: 29px; }
如果您有一个列表，其文字长度与选项相似 （例如页面select），则为“假”解决scheme ：
padding-left: calc(50% - 1em);
这适用于Chrome，Firefox和Edge。 诀窍在于将文本从左侧推到中间，然后在px，em或任何选项文本中减去一半的长度。
最好的解决schemeIMO（2017年）仍然取代通过JS的select，并build立自己的假的select框与div或其他和绑定点击事件，以支持跨浏览器。
这对于非常具体的用例可能是有用的。 这是繁琐和丑陋的，但工作跨浏览器：只需使用硬编码的空格给每个条目相同的长度。
<select class="form-control" id="sel1"> <option>-10</option> <option> -9</option> <option> -8</option> <option> -7</option> <option> -6</option> <option> -5</option> <option> -4</option> <option> -3</option> <option> -2</option> <option> -1</option> <option> 0</option> <option> 1</option> <option> 2</option> <option> 3</option> <option> 4</option> <option> 5</option> <option> 6</option> <option> 7</option> <option> 8</option> <option> 9</option> <option> 10</option> </select>
如果选项是静态的，则可以在select框中侦听更改事件，并为每个单独的项目添加填充
$('#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; } });
