blocks|key|343006|text|我担心这在纯CSS中是不可能的，也不可能实现完全的跨浏览器兼容。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|343007|但是，使用jQuery插件，您可以设置下拉菜单的样式：|343008|https://www.filamentgroup.com/lab/jquery-ui-selectmenu-an-aria-accessible-plugin-for-styling-a-html-select.html|offset|length|343009|这个插件隐藏了select元素，并动态创建了span元素等，以显示自定义下拉列表样式。我很有信心你能够改变跨度等的样式来居中对齐项目。|style|CODE|343010|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|33|0|0|7|6|M|4|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|U|8|@]|9|@$F|V|G|W|1|X]]|A|$]]|$1|H|3|I|5|6|7|Y|8|@$F|Z|G|10|J|K]|$F|11|G|12|J|K]]|9|@]|A|$]]|$1|L|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|M|$N|$5|O|P|Q|A|$R|E]]]]

<p>I'm afraid this isn't possible with plain CSS, and won't be possible to make completely cross-browser compatible.</p>

<p>However, using a jQuery plugin, you could style the dropdown:</p>

<p><a href="https://www.filamentgroup.com/lab/jquery-ui-selectmenu-an-aria-accessible-plugin-for-styling-a-html-select.html" rel="noreferrer">https://www.filamentgroup.com/lab/jquery-ui-selectmenu-an-aria-accessible-plugin-for-styling-a-html-select.html</a></p>

<p>This plugin hides the <code>select</code> element, and creates <code>span</code> elements etc on the fly to display a custom drop down list style. I'm quite confident you'd be able to change the styles on the spans etc to center align the items.</p>


blocks|key|559394|text|这是为了向右对齐。试试看：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|559395|select{
++++text-align-last:right;
++++padding-right:+29px;
++++direction:+rtl;
}|code-block|syntax|javascript|559396|浏览器对text-align-last属性的支持可以在这里找到：https://www.w3schools.com/cssref/css3_pr_text-align-last.asp看起来只有Safari还不支持它。|offset|length|style|CODE|559397|entityMap|0|LINK|mutability|MUTABLE|url|https://www.w3schools.com/cssref/css3_pr_text-align-last.asp^0|0|0|4|F|W|1O|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@$I|X|J|Y|K|L]]|9|@$I|Z|J|10|1|11]]|A|$]]|$1|M|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

<p>That's for align right. Try it:</p>

<pre><code>select{
    text-align-last:right;
    padding-right: 29px;
    direction: rtl;
}
</code></pre>

<p>the browser support for the <code>text-align-last</code> attribute can be found here: <a href="https://www.w3schools.com/cssref/css3_pr_text-align-last.asp" rel="noreferrer">https://www.w3schools.com/cssref/css3_pr_text-align-last.asp</a> 
It looks like only Safari is still not supporting it.</p>


blocks|key|559518|text|2020年，我正在使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|559519|select+{
++++text-align:+center;
++++text-align-last:+center;
++++-moz-text-align-last:+center;
}|code-block|syntax|javascript|559520|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>2020, Im using:</p>

<pre><code>select {
    text-align: center;
    text-align-last: center;
    -moz-text-align-last: center;
}
</code></pre>


blocks|key|559417|text|使用下面的代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|559418|select+{

text-align-last:+center;
padding-right:+29px;

}|code-block|syntax|javascript|559419|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>just using this: </p>

<pre><code>select {

text-align-last: center;
padding-right: 29px;

}
</code></pre>


blocks|key|343422|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|343423|select+{
++text-align:+center;
++text-align-last:+center;
}
option+{
++text-align:+left;
}|code-block|syntax|javascript|343424|<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>|343425|343426|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>select {
  text-align: center;
  text-align-last: center;
}
option {
  text-align: left;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;select&gt;
   &lt;option value=""&gt;(please select a state)&lt;/option&gt;
   &lt;option class="lt" value="--"&gt;none&lt;/option&gt;
   &lt;option class="lt" value="AL"&gt;Alabama&lt;/option&gt;
   &lt;option class="lt" value="AK"&gt;Alaska&lt;/option&gt;
   &lt;option class="lt" value="AZ"&gt;Arizona&lt;/option&gt;
   &lt;option class="lt" value="AR"&gt;Arkansas&lt;/option&gt;
   &lt;option class="lt" value="CA"&gt;California&lt;/option&gt;
   &lt;option class="lt" value="CO"&gt;Colorado&lt;/option&gt;
&lt;/select&gt;</code></pre>
</div>
</div>
</p>


blocks|key|343239|text|此JS函数应该适用于您|type|unstyled|depth|inlineStyleRanges|entityRanges|data|343240|function+getTextWidth(txt)+{
++var+$elm+=+$('<span+class="tempforSize">'%2Btxt%2B'</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));
});|code-block|syntax|javascript|343241|完整的代码在这里：http://codepen.io/anon/pen/NxyovL|offset|length|343242|entityMap|0|LINK|mutability|MUTABLE|url|http://codepen.io/anon/pen/NxyovL^0|0|0|9|X|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>This JS function should work for you</p>

<pre><code>function getTextWidth(txt) {
  var $elm = $('&lt;span class="tempforSize"&gt;'+txt+'&lt;/span&gt;').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));
});
</code></pre>

<p>Full Codepen here: <a href="http://codepen.io/anon/pen/NxyovL" rel="noreferrer">http://codepen.io/anon/pen/NxyovL</a></p>


blocks|key|343182|text|为了让它只与css一起工作，我总是使用下面的技巧。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|343183|padding-left:+45%25;
font-size:+50px;|code-block|syntax|javascript|343184|填充将使文本居中，并可根据文本大小进行调整:)|343185|从验证的角度来看，这显然不是100%25正确的，但它确实起到了作用:)|343186|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>I have always gotten away with the following hack to get it to work with css only.</p>

<pre><code>padding-left: 45%;
font-size: 50px;
</code></pre>

<p>padding will center the text and can be tweaked for the text size :)</p>

<p>This is obviously not 100% correct from a validation point of view I guess but it does the job :)</p>


blocks|key|343091|text|不完全居中，但使用上面的例子，你可以在选择框中留出左边距。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|343092|<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>|code-block|syntax|javascript|343093|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Not quite Centering but using example above you can make a left margin in select box.</p>

<pre><code>&lt;style&gt;.UName { text-indent: 5px; }&lt;/style&gt;&lt;br&gt;

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


blocks|key|559445|text|这对我很有效：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|559446|text-align:+center;
text-align-last:+center;|code-block|syntax|javascript|559447|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>this worked for me:</p>

<pre><code>text-align: center;
text-align-last: center;
</code></pre>


blocks|key|559459|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|559460|select+{
++++padding-left:+50%25+!important;
++++width:+100%25;
}|code-block|syntax|javascript|559461|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>try this :</p>

<pre><code>select {
    padding-left: 50% !important;
    width: 100%;
}
</code></pre>


blocks|key|343054|text|你不能对<select>或<option>进行过多的定制。唯一的方法(跨浏览器)是使用div和css/js手动创建一个下拉菜单来创建类似的东西。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|343055|entityMap^0|4|8|D|8|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

<p>You can't really customise <code>&lt;select&gt;</code> or <code>&lt;option&gt;</code> much. The only way (cross-browser) would be to manually create a drop down with divs and css/js to create something similar.</p>


blocks|key|343295|text|如果你没有找到任何解决方案，你可以在angularjs上使用这个技巧，或者使用js将所选值映射到div上的文本，这个解决方案在angular上完全兼容css，但需要在select和div之间进行映射：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|343296|​|343297|var+myApp+=+angular.module('myApp',+[]);

myApp.controller('selectCtrl',+['$scope',
++function($scope)+{
++++$scope.value+=+'';


++}
]);|code-block|syntax|javascript|343298|.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;
}|343299|<!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>|343300|343301|希望这能对某些人有用，因为我花了一天的时间在phonegap上找到了这个解决方案。|343302|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|T|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|K|3|L|5|F|7|V|8|@]|9|@]|A|$G|H]]|$1|M|3|C|5|6|7|W|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|X|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|Q|$]]

<p>If you didn't find any solution, you can use this trick on angularjs or using js to map selected value with a text on the div, this solution is full css compliant on angular but need a mapping between select and div:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var myApp = angular.module('myApp', []);

myApp.controller('selectCtrl', ['$scope',
  function($scope) {
    $scope.value = '';


  }
]);</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
&lt;html lang="en"&gt;

&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;Example - example-guide-concepts-1-production&lt;/title&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body ng-app="myApp"&gt;
  &lt;div ng-app ng-controller="selectCtrl"&gt;
    &lt;div class=select&gt;
      &lt;select ng-model="value" class="ghostSelect"&gt;
        &lt;option value="Option 1"&gt;Option 1&lt;/option&gt;
        &lt;option value="Option 2"&gt;Option 2&lt;/option&gt;
        &lt;option value="Option 3"&gt;Option 3&lt;/option&gt;
      &lt;/select&gt;
      &lt;div&gt;{{value}}
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/body&gt;</code></pre>
</div>
</div>
</p>

<p>Hope this could be useful for someone as it took me one day to find this solution on phonegap.</p>


blocks|key|343133|text|虽然您不能将选项文本放在select中居中，但您可以在select顶部放置一个绝对定位的div，以达到相同的效果：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|343134|#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>|code-block|syntax|javascript|343135|确保div和select在文档中都有固定的位置。|343136|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>While you cannot center the option text within a select, you can lay an absolutely positioned div over the top of the select to the same effect:</p>

<pre><code>#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());
});

&lt;select id="selectToCenter"&gt;&lt;/select&gt;
&lt;div id="centered"&gt;&lt;/div&gt;
</code></pre>

<p>Make sure the both the div and select have fixed positions in the document.</p>


blocks|key|559646|text|我遇到了这样的问题，一个客户坚持这样做，他们使用的是Mac和iPhone。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|559647|我最终使用了媒体查询和百分比填充-左填充。这是一个令人满意的解决方案吗？一点也不，但它让我继续前进。|559648|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

<p>I ran into this issue where a client was insisting on this, and they were on a Mac and and iPhone.</p>
<p>I wound up using media queries and a percentage padding for padding-left. Was this a satisfying solution? Not at all, but it let me move on.</p>


blocks|key|559689|text|最简单的方法:使用padding-left|type|unstyled|depth|inlineStyleRanges|entityRanges|data|559690|select{
+++padding-left:2rem
}|code-block|syntax|javascript|559691|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Easiest way:
Use padding-left</p>
<pre><code>select{
   padding-left:2rem
}
</code></pre>


blocks|key|559589|text|它还不是100%25，但是你可以使用这个代码片段！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|559590|text-align-last:+center；//对于Chrome+text-align:+center；//对于Firefox|559591|暂时不能在Safari或Edge上工作！|559592|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

<p>It's not 100% yet, but you can use this snippet!</p>

<p>text-align-last: center; // For Chrome
text-align: center; // For Firefox</p>

<p>Doesn't work on Safari or Edge, for now!</p>


blocks|key|559271|text|如果选项是静态的，则可以侦听选择框中的更改事件，并为每个单独的项目添加填充|type|unstyled|depth|inlineStyleRanges|entityRanges|data|559272|$('#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;
++++}
});|code-block|syntax|javascript|559273|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>if the options are static, you could listen for the change event on your select box and add padding for each individual item</p>

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


<p>I tried this: <a href="http://jsfiddle.net/ilyaD/KGcC3/" rel="noreferrer">http://jsfiddle.net/ilyaD/KGcC3/</a></p>

<p>HTML:</p>

<pre class="lang-html prettyprint-override"><code>&lt;select name="state" class="ddList"&gt;
    &lt;option value=""&gt;(please select a state)&lt;/option&gt;
    &lt;option class="lt" value="--"&gt;none&lt;/option&gt;
    &lt;option class="lt" value="AL"&gt;Alabama&lt;/option&gt;
    &lt;option class="lt" value="AK"&gt;Alaska&lt;/option&gt;
    &lt;option class="lt" value="AZ"&gt;Arizona&lt;/option&gt;
    &lt;option class="lt" value="AR"&gt;Arkansas&lt;/option&gt;
    &lt;option class="lt" value="CA"&gt;California&lt;/option&gt;
    &lt;option class="lt" value="CO"&gt;Colorado&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p>CSS:</p>

<pre class="lang-css prettyprint-override"><code>select { width: 400px; text-align: center; }
select .lt { text-align: center; }
</code></pre>

<p>As you can see, it doesn't work.  Is there a CSS-only way to center text in the select-box?</p>


Is it possible to center text in select box?

jQuery

我试过了：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>    

问可以在选择框中居中显示文本吗？
EN

回答 17

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问可以在选择框中居中显示文本吗？EN

回答 17

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问可以在选择框中居中显示文本吗？
EN