如何将文本置于选择列表中心

Question

I'm having trouble styling a select list in an html form. Basically I want it to have a font size of 12px, and a height of 30px; The problem is that the box is drawn to the right hight, but the text rendering varies in each browser. In FireFox it renders it in the top left corner. I want to vertically center the text. Anyone know of a way to do this or do I need to make something custom out of a ul?

Thanks

Answer 1

The only way is to drop the <select> and use an <input type="text"< and a <div> to give you the exact feel of a select list but with the ability to do everything as it will be a <li> that you have at the end.

I use this approach not to show aligned text but to use a small icon per each line . This also gives me the ability to show exactly how I want no mater what browser is used as well.

like the image below

Answer 2

You cannot reliably customize <select> elements using CSS in all browsers.

You need to make a custom list control.

Answer 3

Good luck with this, text-align works only with block elements. The select list is formatted by browsers differently, as it is with most of the form field elements (like the file input type). Wish for better days. The workarounds that I have seen for this are really ugly.

Answer 4

Bit late to add a new answer, however I came across your question looking for the same answer and thought there must be another way.

Hurray! I actually found one!

So for any new people coming to find this answer, here is how I have achieved this:

Simply use   to manually center each option in your drop down list.