Html 选择选项的水平文本中心
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19790687/
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
Horizontally text center for select option
提问by Mahmoud
I have this simple fiddlewith standard <select>html element, all what am trying to do is give center alignment for <option>tags.
我有这个简单的带有标准html 元素的小提琴，<select>我想要做的就是为<option>标签提供居中对齐。
I've tried already text-indent: 20pxbut its center only the visible tag in the select!
我已经尝试过了，text-indent: 20px但它的中心只有选择中的可见标签！
How can I center it?
我怎样才能把它居中？
回答by C Travel
Solution 1:(A simple solution)
解决方案1：（一个简单的解决方案）
select {
...
padding: 0 0 0 20px;
}
Solution 2:(added 27-10-2017)
Only the selected number will be centered.
* Probably not yet supported by Safari
解决方案 2：（添加 27-10-2017）
只有选定的数字会居中。
* Safari 可能还不支持
select {
...
text-align: center;
text-align-last: center;
}
回答by Olaf Dietsche
You can just use
你可以使用
select {
text-align: center;
}
See modified JSFiddle
查看修改后的JSFiddle
Unfortunately, this works for Firefox only. For Chrome, you must use padding-leftsimilar to @CTravel's solution
不幸的是，这仅适用于 Firefox。对于 Chrome，您必须使用padding-left类似于@CTravel 的解决方案
select {
padding-left: 20px;
}
Modified JSFiddle
修改后的JSFiddle
But this doesn't work on the optionelements in Firefox, so this isn't a cross-browser solution either.
但这不适option用于 Firefox 中的元素，因此这也不是跨浏览器的解决方案。
回答by Phony Lou
don't use
不要使用
select {
...
padding: 0 0 0 20px;
}
or
或者
select {
text-align: center;
}
they are no working in select. maybe you can use JQuery's select style:JQuery UI Select
他们不在选择中工作。也许你可以使用 JQuery 的选择风格：JQuery UI Select
回答by William Riley
Check this link out:
看看这个链接：
as stated elsewhere, it is not possible with plain CSS. (Not for all browsers anyhow)
如其他地方所述，纯 CSS 是不可能的。（无论如何不适用于所有浏览器）
