是否可以在选择框中居中文本?

我试过这个: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唯一的方法来居中选择框中的文本?

当前回答

我总是用下面的方法让它只与css一起工作。

padding-left: 45%;
font-size: 50px;

填充将文本居中，可以调整文本大小:)

从验证的角度来看，这显然不是100%正确的，但它确实起作用了:)

2014-12-24 11:37:46

其他回答

这个JS函数应该适合你

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));
});

完整的代码来源:http://codepen.io/anon/pen/NxyovL

2016-01-24 23:36:00

它还不是100%，但您可以使用这个片段!

text-align-last:中心;// Chrome浏览器 text-align:中心;// Firefox

目前在Safari或Edge上不工作!

2020-06-15 12:29:57

是的，这是可能的。您可以使用text-align-last