css - 是否可以在选择框中将文本居中？

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

score 465 · Accepted Answer

Chrome有一个部分解决方案：

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

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

score 97 · Accepted Answer

那是为了对齐。试试看：

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 仍然不支持它。

score 63 · Accepted Answer

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

使用 CSS 文本缩进

例子

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

CSS 代码

select { text-indent: 5px; }

score 62 · Accepted Answer

62

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

text-align-last: center;

于 2019-05-11T12:46:11.983 回答

score 58 · Accepted Answer

2020，我正在使用：

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

score 35 · Accepted Answer

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

However, using a jQuery plugin, you could style the dropdown:

https://www.filamentgroup.com/lab/jquery-ui-selectmenu-an-aria-accessible-plugin-for-styling-a-html-select.html

This plugin hides the select element, and creates span 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.

score 23 · Accepted Answer

23

只是使用这个：

select {

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

}

于 2017-06-12T12:30:51.897 回答

score 22 · Accepted Answer

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>

score 17 · Accepted Answer

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

score 10 · Accepted Answer

我一直使用以下技巧使其仅与 css 一起使用。

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

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

从验证的角度来看，我猜这显然不是 100% 正确的，但它确实有效:)

score 7 · Accepted Answer

如果您有一个包含类似文本长度选项的列表（例如页面选择），则替代“假”解决方案：

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

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

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

score 5 · Accepted Answer

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

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

score 5 · Accepted Answer

5

尝试这个：

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

于 2018-06-12T09:04:16.753 回答

score 5 · Accepted Answer

5

这对我有用：

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

于 2018-05-14T00:31:31.543 回答

score 2 · Accepted Answer

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

score 2 · Accepted Answer

如果您没有找到任何解决方案，您可以在 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 上找到这个解决方案。

score 1 · Accepted Answer

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

score 1 · Accepted Answer

在您选择使用width: auto和 no padding 以查看您的文本有多长。我在我的选择中使用了 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 的东西后面，并将 on select 侦听器从原始应用到隐藏的重复。
如果由于香草限制而无法内联样式可能很难使用，但您可以制作一个脚本来优化头部的 appendChild。

score 0 · Accepted Answer

0

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

select{
   padding-left:2rem
}

于 2021-08-06T08:43:20.840 回答

score 0 · Accepted Answer

我遇到了一个客户坚持这样做的问题，他们在 Mac 和 iPhone 上。

我最终使用了媒体查询和填充左的百分比填充。这是一个令人满意的解决方案吗？一点也不，但它让我继续前进。

score -1 · Accepted Answer

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

文本对齐最后：居中；// 对于 Chrome text-align: center; // 对于火狐

暂时不适用于 Safari 或 Edge！

score -3 · Accepted Answer

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

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

css - 是否可以在选择框中将文本居中？

22 回答 22

Related

Reference