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

198

我尝试了这个：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 
— 伊利约
source
5
在我的Firefox中，它可以正常工作:)
— Mateusz Rogulski'5
10
在chrome上无效。
— 伊曼纽尔
4
@Blazemonger我可以想像在许多情况下，为了使人更容易进行词典扫描，拥有看起来对称的设计比向左对齐的选项更重要。例如，如果我想使用一个性别选择选项在移动设备上水平填充屏幕100％，那么将“男性”和“女性”文本完全向左推就显得很奇怪。
— 肯特·芒特·卡斯珀森
试试text-align-last：center;
— 阿里（Ari）

Answers:

29

恐怕普通的CSS不可能做到这一点，并且不可能完全兼容跨浏览器。

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

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

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

— t
source
web.archive.org/web/20160328192510/http://filamentgroup.com/lab/… 这是改进的版本，因为不再维护filamentgroup的了。github.com/fnagel/jquery-ui
— cdignam
81

那是为了向右对齐。试试吧：

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

— 艾莉·艾格莉（Aly-Elgarhy）
source
7
这应该是最多的回答，简单和纯粹的CSS的解决方案，完美地为我工作（虽然我改变了text-align-last: right;对center，因为我想在中间的标签）。
— JVG
这个答案真令人震惊！我在其他任何地方都找不到如此简单的解决方案。
— 乌德格
非常感谢，应该选择此答案，因为这完全可以工作！
— 尼克
1
text-align-last：center; chrome和firefox对我有用。没有优势，我也不敢冒险。
— 丹尼斯·海登
1
这不适用于任何移动浏览器。我主要希望它在哪工作。
— evolross
58

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

使用CSS文字缩进

例

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

CSS代码 

select { text-indent: 5px; }
— 马克·卡雷拉斯
source
2
我要么听不懂，要么根本无法对齐文本
— Matanster，2016年
文字缩进...有趣的是，我不知道该属性。非常感谢！
— Froxx '16
9
这仅适用于一个特定选项，text-indent取决于选项文本相对于选择框宽度的多少水平空间，所以这是一个不完整的答案，我很惊讶它得到了43个投票，这是正确的答案上面的Smee先生提供了使用文本缩进的功能。
— 卢罗马
这是一个有趣的想法，但它不能按一定百分比工作，因此如何将每个项目居中？
— Buts 2016年
这是正确的答案。使用文字缩进：50％将使选项在选择中居中。
— 约翰·史密斯
49

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

text-align-last: center;
— Manjeet Kumar Nai
source
1
关闭时，这似乎使选择中显示的值居中。下拉菜单中的选项仍与左侧对齐（至少在2019年9月的Chrome中如此）
— bjg222
1
是的，我想在中间显示，这是正确的
— Pritesh
24

2020年，即时通讯使用：

select {
    text-align: center;
    text-align-last: center;
    -moz-text-align-last: center;
}
— 祖里
source
不幸的是，这在野生动物园中不起作用...截至2020年5月，Apple仍强制iOS上的所有其他浏览器使用Safari的渲染引擎...
— 末日
22

只是使用这个： 

select {

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

}
— 胺_Dev
source
3
您不需要包括“ padding-right：29px;”。如果您使用“中心”。我怀疑是因为您复制了16年10月25日Aly-Elgarhy的答案。
— 杰登·劳森
从某人的答案抄袭时，应提及他们的名字。
— Munim Munna '18
是的，我直接从我的代码中直接复制了它，这就是为什么我将padding-right放置的原因，可能是我将另一个解决方案复制到了我的代码中，然后又将解决方案从我的代码复制到了stackoverflow中。
— Amine_Dev，
21 

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>
展开摘要

— 杰米·赫伯（Jamie Hutber）
source
1
这是唯一帮助我+1的解决方案
2020年5月-这不适用于Safari（或所有iOS设备上的任何浏览器）
— 末日
16

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

— 史美先生
source
9

我一直都避开以下黑客攻击，使其只能与CSS一起使用。

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

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

从验证的角度来看，这显然不是100％正确的，但确实可以做到这一点:)

— 本·普雷托里乌斯
source
7

如果您有一个列表，该列表的文本长度选项相似（例如，选择页面），则可以选择“假”解决方案：

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

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

在此处输入图片说明

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

— 丹尼斯·海登
source
1
可在Chrome浏览器中使用，但在IE中看起来比中间位置偏右。
— user3366706 '18
5

不完全居中，但是使用上面的示例，您可以在选择框中添加一个左边距。

<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>
— 理查德
source
为什么不只是添加text-indent到<select>标签像@marc卡雷拉斯说的吗？
— Munim Munna '18
3

试试这个 ：

select {
    padding-left: 50% !important;
    width: 100%;
}
— hmahdavi
source
2

您不能真正自定义<select>或<option>太多。唯一的方法（跨浏览器）是使用divs和css / js手动创建下拉菜单以创建类似的东西。

— 伊曼纽尔
source
2

如果找不到任何解决方案，则可以在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上找到此解决方案。

— jup31
source
其非中间！
— Qui-Gon Jinn
1

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

— 佐兹
source
0

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

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

目前无法在Safari或Edge上使用！

— 用户名
source
-3

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

$('#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;
    }
});
— 布莱恩·帕克斯（Brian Parks）
source
在每个单词的左边都留空白并不是一个好主意。来自数据库的动态单词又如何呢？
— user3645907
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.