css - 如何确保选择选项文本在 IE 中居中对齐？

Question

以下 CSS 在 FF 中有效，但在 IE（至少 8.0）中无效，如何确保文本在 IE8.0 的中心对齐？谢谢！！！

select, option {
    text-align: center;
}

Answer 1

不幸的是，您无法更改SELECTIE 中项目的对齐方式，尽管让我感到惊讶的是，即使 IE 8 也保留了这个坏习惯。

Answer 2

鉴于这在 IE 中是不可能的，我认为您将不得不求助于：

1. 实现您自己的 SELECT 小部件。有很多 JS 库可以做到这一点，主要是因为 SELECT 输入很难设置样式。

2. 在较小的选项前插入适当的空格。

编辑：看起来空白不起作用，但 HTML 空间可以：

<SELECT>
   <OPTION>&nbsp;&nbsp;&nbsp;SMALL</OPTION>
   <OPTION>&nbsp;&nbsp;LARGER</OPTION>
</SELECT>

这真是一个黑客...

Answer 3

您可以创建一个类并使用选项字段中的“STYLE TAG”来调用它。::

例如：--

<style type="text/css">
select { width: 400px; text-align:center; }
select .lt { text-align:left; }
</style>




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