Question

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的方式来在选择框中居中文本？

Answer 1

Chrome 的部分解决方案：

select { width: 400px; text-align-last:center; }

它确实使所选选项居中，但不是下拉列表中的选项。

Answer 2

这是对齐的。试试吧：

select{
    text-align-last:right;
    padding-right: 29px;
    direction: rtl;
}

可以在此处找到text-align-last属性的浏览器支持：https://www.w3schools.com/cssref/css3_pr_text-align-last.asp 看起来只有Safari仍然不支持它。

Answer 3

您必须将CSS规则放入select类中。

使用CSS text-indent

示例

<select class="day"> /* option 1 option 2 option 3 option 4 option 5 here */ </select>

CSS代码

select { text-indent: 5px; }

Answer 4

2020年，我正在使用：

select {
    text-align: center;
    text-align-last: center;
    -moz-text-align-last: center;
}

Answer 5

我担心使用纯CSS无法做到这一点，并且无法完全跨浏览器兼容。

但是，使用jQuery插件，您可以设置下拉列表的样式：

http://filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/

此插件隐藏select元素，并动态创建span元素等以显示自定义下拉列表样式。我非常有信心你能够改变跨度上的样式以使项目居中对齐。

Answer 6

只是使用它：

select {

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

}

Answer 7

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

完整的Codepen：http://codepen.io/anon/pen/NxyovL

Answer 8

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>

Answer 9

我总是得到以下黑客来使它只与css一起工作。

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

填充将使文本居中，并可以调整文本大小：）

从验证的角度来看，这显然不是100％正确，但我确实做到了这一点：）

Answer 10

备选“假”解决方案，如果您的列表中包含类似文字长度的选项（例如，页面选择）：

padding-left: calc(50% - 1em);

适用于Chrome，Firefox和Edge。诀窍是推文从左到中，然后在px，em或任何选项文本中减去一半的长度。

最佳解决方案IMO（2017年）仍在通过JS替换select并使用div或其他任何东西构建您自己的假选择框，并在其上绑定点击事件以获得跨浏览器支持。

Answer 11

不完全居中，但使用上面的示例，您可以在选择框中创建左边距。

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

Answer 12

这对我有用：

text-align: center;
text-align-last: center;

Answer 13

试试这个：

select {
    padding-left: 50% !important;
    width: 100%;
}

Answer 14

您无法真正自定义<select>或<option>。唯一的方法（跨浏览器）是手动创建一个带有div和css / js的下拉列表来创建类似的东西。

Answer 15

如果你没有找到任何解决方案，你可以在angularjs上使用这个技巧或使用js将所选值与div上的文本映射，这个解决方案是完全符合角度的css但需要select和div之间的映射：

angular.module('schwimmfestivalApp')
  .service('httpService', function($http) {
    // AngularJS will instantiate a singleton by calling "new" on this function
    var articleList = [];
    var food = [];


    this.getArticles = function() {
      if (articleList < 1) {
        $http.get('https://www.anmeldung.schwimmfestival.de/server/func/getArtikel.php').then(response => {
          articleList = response.data;
          console.log(articleList);
        });
      }
      return articleList;
    };

    this.getArticleByCategory = function(category) {
      if (food.length < 1) {
        for (var i = 0; i < this.getArticles().length; i++) {
          if (this.getArticles()[i].kategorie == category) {
            food.push(this.getArticles()[i]);
          }
        }
      }

      return food;
    };

    this.getFood = function() {
      console.log('Food: '+ food);
      return this.getArticleByCategory('TN Essen')
    };
  });

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

希望这对某些人有用，因为我花了一天时间在phonegap上找到这个解决方案。

Answer 16

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

text-align-last: center;

Answer 17

虽然您无法将选项文本置于选区内，但您可以在选区顶部放置一个绝对定位的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都在文档中具有固定位置。

Answer 18

在您选择时使用 width: auto 并且没有填充来查看您的文本有多长。我在我的选择中使用 100% 可用宽度，并且我的所有选项都具有相同的长度，这使我可以使用非常简单的 css。

text-indent 将文本从左边移动，类似于 padding-left
120px 是我的文本长度 - 我想把它居中，所以取一半大小和一半选择大小，剩下 50% - 60px

select{
  width: 100%;
  text-indent: calc(50% - 60px);
}

如果我有不同大小的选项怎么办？

有可能，但是，解决方案不会很好。
如果选项之间的差异不是 5 个字符，前一种解决方案可能会让您真正接近居中。

如果您仍然需要更精确地居中，您可以这样做

准备这门课：

.realWidth{
   width: auto;
}

应用 onChange 监听器选择元素

在该侦听器中将 .realWidth 应用到带有

的选择元素

const selectRef = document.getElementById("yourId");
selectRef.classList.add("realWidth");

获取选项的实际宽度。

const widthOfSelect = selectRef.getBoundingClientRect().width / 2;

widthOfSelect 是您要查找的宽度。将其存储在全局/组件变量中。

去掉 realWidth，你不再需要它了。

selectRef.classList.remove("realWidth");

我正在使用 react，我不确定这是否适用于 vanilla，否则您必须找到其他解决方案。

<select style={`textIndent: calc(50% - ${widthOfSelect}) %`}> ... </select>

然而，另一种糟糕的解决方案可能是使用 js 创建 CSS 类并将其放在首位。

优点：

可能有效，我还没有尝试过动态解决方案，但它应该有效。

缺点：

如果程序不够快，用户将看到 width: auto 发生，从而想知道发生了什么。如果是这种情况，只需创建重复选择，将其隐藏在具有更高 z-index 的东西后面，并将原始选择侦听器应用到隐藏的重复。
如果由于 vanilla 限制而无法内联样式，则可能很难使用，但您可以编写脚本来优化头部的 appendChild。

Answer 19

添加这样的＆nbsp ...

    <option value="0"> &nbsp&nbsp&nbsp&nbsp&nbsp--Select Name--</option>

直到您获得居中对齐文本的效果

Answer 20

还不是100％，但是您可以使用此代码段！

text-align-last：居中； //对于Chrome 文本对齐：居中； //对于Firefox

暂时无法在Safari或Edge上运行！

Answer 21

我遇到了这个问题，客户坚持要这样做，而他们使用的是 Mac 和 iPhone。

我最终使用了媒体查询和 padding-left 的百分比填充。这是一个令人满意的解决方案吗？完全没有，但它让我继续前进。

Answer 22

最简单的方法：使用 padding-left

select{
   padding-left:2rem
}

Answer 23

这对于非常具体的用例非常有用。它是繁琐而丑陋的但是跨浏览器工作：只需使用硬编码的空格来为每个条目提供相同的长度。

<select class="form-control" id="sel1">
    <option>-10</option>
    <option>&nbsp;-9</option>
    <option>&nbsp;-8</option>
    <option>&nbsp;-7</option>
    <option>&nbsp;-6</option>
    <option>&nbsp;-5</option>
    <option>&nbsp;-4</option>
    <option>&nbsp;-3</option>
    <option>&nbsp;-2</option>
    <option>&nbsp;-1</option>
    <option>&nbsp;&nbsp;0</option>
    <option>&nbsp;&nbsp;1</option>
    <option>&nbsp;&nbsp;2</option>
    <option>&nbsp;&nbsp;3</option>
    <option>&nbsp;&nbsp;4</option>
    <option>&nbsp;&nbsp;5</option>
    <option>&nbsp;&nbsp;6</option>
    <option>&nbsp;&nbsp;7</option>
    <option>&nbsp;&nbsp;8</option>
    <option>&nbsp;&nbsp;9</option>
    <option>&nbsp;10</option>
</select>

Answer 24

如果选项是静态的，您可以在选择框中侦听更改事件并为每个单独的项添加填充

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

Answer 25

您可以将此样式添加到下拉列表的标签（文本对齐：居中），如下所示：

public final static UUID UUID_HEART_RATE_MEASUREMENT =
                UUID.fromString(SampleGattAttributes.HEART_RATE_MEASUREMENT);

是否可以将文本置于选择框中？

25 个答案: