how to make sure select option text align in the center in IE?
49,636
Solution 1
Unfortunately, you can't change the alignment of SELECT
items in IE, although it surprises me that even IE 8 keeps this bad habit.
Solution 2
Given that this is not possible in IE, I think you would have to resort to:
Implementing your own SELECT widgets. There are many JS libraries that do this, mostly because SELECT inputs are hard to style.
Insert the appropriate whitespace in front of the smaller options.
Edit: looks like whitespace doesn't work, but HTML space does:
<SELECT>
<OPTION> SMALL</OPTION>
<OPTION> LARGER</OPTION>
</SELECT>
That's quite a hack...
Author by
WilliamLou
Updated on July 24, 2022Comments
-
WilliamLou almost 2 years
The following CSS works in FF, but not in IE(at least 8.0), how can I make sure that the text align in the center for IE8.0? Thanks!!!
select, option { text-align: center; }
-
Pekka over 14 yearsWhitespace doesn't work, IE appends them to the right hand side of the item - for whatever reason...
-
Daniel about 9 yearsThis solution fails on IE just like the one the author of the question presented. Not even talking about the fact it is not faithful to what seems to be his desire: centering not only the text in the select but also in the options...