CSS 是否可以在选择框中居中文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10813528/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to center text in select box?
提问by ilyo
I tried this: http://jsfiddle.net/ilyaD/KGcC3/
我试过这个：http: //jsfiddle.net/ilyaD/KGcC3/
HTML:
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:
CSS：
select { width: 400px; text-align: center; }
select .lt { text-align: center; }
As you can see, it doesn't work. Is there a CSS-only way to center text in the select-box?
如您所见，它不起作用。是否有仅使用 CSS 的方式将文本居中放置在选择框中？
采纳答案by Curt
I'm afraid this isn't possible with plain CSS, and won't be possible to make completely cross-browser compatible.
恐怕这在普通 CSS 中是不可能的，也不可能完全跨浏览器兼容。
However, using a jQuery plugin, you could style the dropdown:
但是，使用 jQuery 插件，您可以设置下拉菜单的样式：
This plugin hides the selectelement, and creates spanelements 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.
此插件隐藏select元素，并动态创建span元素等以显示自定义下拉列表样式。我非常有信心您能够更改跨度等的样式以将项目居中对齐。
回答by Julian Cardenas
There is a partial solution for Chrome:
Chrome有一个部分解决方案：
select { width: 400px; text-align-last:center; }
It does center the selected option, but not the options inside the dropdown.
它确实使所选选项居中，但不是下拉列表中的选项。
回答by Aly-Elgarhy
That's for align right. Try it:
那是为了对齐。尝试一下：
select{
text-align-last:right;
padding-right: 29px;
direction: rtl;
}
the browser support for the text-align-lastattribute can be found here: https://www.w3schools.com/cssref/css3_pr_text-align-last.aspIt looks like only Safari is still not supporting it.
浏览器对该text-align-last属性的支持可以在这里找到：https: //www.w3schools.com/cssref/css3_pr_text-align-last.asp看起来只有 Safari 仍然不支持它。
回答by marc carreras
You have to put the CSS rule into the select class.
您必须将 CSS 规则放入 select 类中。
Use CSS text-indent
使用 CSS 文本缩进
Example
例子
<select class="day"> /* option 1 option 2 option 3 option 4 option 5 here */ </select>
CSS code
CSS代码
select { text-indent: 5px; }
回答by Manjeet Kumar Nai
Yes, it is possible. You can use text-align-last
对的，这是可能的。您可以使用text-align-last
text-align-last: center;
回答by Amine_Dev
just using this:
只是使用这个：
select {
text-align-last: center;
padding-right: 29px;
}
回答by Jamie Hutber
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>回答by jzuhri
2020, Im using:
2020 年，我正在使用：
select {
text-align: center;
text-align-last: center;
-moz-text-align-last: center;
}
回答by Mr. Smee
This JS function should work for you
这个 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));
});
Full Codepen here: http://codepen.io/anon/pen/NxyovL
完整的 Codepen 在这里：http://codepen.io/anon/pen/NxyovL
回答by Ben Pretorius
I have always gotten away with the following hack to get it to work with css only.
我总是通过以下 hack 让它只与 css 一起工作。
padding-left: 45%;
font-size: 50px;
padding will center the text and can be tweaked for the text size :)
填充将使文本居中，并且可以调整文本大小:)
This is obviously not 100% correct from a validation point of view I guess but it does the job :)
我猜从验证的角度来看，这显然不是 100% 正确，但它可以完成工作:)
