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

小开

最佳答案

恐怕这在纯CSS中是不可能实现的，也不可能实现完全跨浏览器兼容。

然而，使用jQuery插件，你可以为下拉菜单设置样式:

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

这个插件隐藏了select元素，并动态创建span元素等，以显示自定义的下拉列表样式。我很有信心，你可以改变样式跨度等中心对齐的项目。

小开

你不能真正地自定义<select>或<option>。唯一的方法(跨浏览器)将是手动创建一个下拉与div和css/js创建类似的东西。

小开

你必须把CSS规则放到选择类中。

使用CSS文本缩进

例子

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

CSS代码

select { text-indent: 5px; }

小开

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

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

小开

虽然你不能将选项文本居中，但你可以在选择的顶部放置一个绝对定位的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在文档中的位置是固定的。

小开

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

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

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

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

小开

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

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

小开

铬有一个部分解决方案:

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

它会将所选选项居中，但不会将下拉列表中的选项居中。

小开

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

小开

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

小开

这是对齐右。试一试:

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

小开

就用这个:

select {


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


}

小开

另一个“假”解决方案，如果你有一个列表与文本长度相似的选项(例如页面选择):

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

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

IMO(2017年)的最佳解决方案仍然是通过JS取代选择，并用divs或其他东西构建自己的假选择框，并在其上绑定单击事件以获得跨浏览器支持

小开

这招对我很管用:

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

小开

试试这个:

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

小开

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>

小开

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

text-align-last: center;

小开

2020年，我使用:

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

小开

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

< p > text-align-last:中心;// Chrome浏览器 text-align:中心;//对于Firefox

. txt

目前在Safari或Edge上不工作!

小开

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

我最终使用了媒体查询和填充左侧的百分比填充。这是一个令人满意的解决方案吗?完全没有，但这让我开始了新的生活。

小开

在你的选择使用宽度:汽车和不填充来查看你的文本有多长。我在我的选择上使用100%的可用宽度，所有的选项都有相同的长度，这允许我使用非常简单的css

文本将从左边移动文本，类似于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， 我不确定香草味的也行，如果不是，你必须找到另一个解。

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

另一个解决方案，然而，这是一个坏的一个可以创建CSS类与js和把它放在头部。

优点:

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

缺点:

如果程序不够快，用户将看到width: auto发生，因此想知道发生了什么。如果是这种情况，只需创建重复的select，将它隐藏在具有更高z-index的东西后面，并将on select侦听器应用于原始的隐藏副本。
可能很难使用，如果你不能内联的风格，因为香草的限制，但你可以做一个脚本来优化appendChild的头部。

小开

< p >简单的方法: 使用padding-left < / p >

select{
padding-left:2rem
}

小开

我也有类似的问题。我的解决方法是在样式部分更改为固定大小的字体:

option {
font-family: Courier New;
width: 12ch;
font-size: 14pt
}


select {
font-family: Courier New;
width: 14ch;
font-size: 14pt
}

在正文中，我用下划线填充所显示的选项，使它们具有相同的长度。
注意使用下划线两边的中心显示:

<select onchange='O.src=this.options[this.selectedIndex].value' align="center">
<option value="" align="center">___(none)___</option>
<option value="https://www.247backgammon.org/" align="center">_Backgammon_</option>
<option value="https://www.247klondike.com/klondikeSolitaire3card.php" align="center">__Klondike__</option>
<option value="https://www.247minesweeper.com/" align="center">_Minesweeper</option>
<option value="https://sudoku.com/" align="center">
<p>___Soduku___</p>
</option>
</select>