css - How to vertically center text in a select/option listbox using CSS

Question

When I set the height of an option in a select listbox, the text in the option is aligned top by default. How can I make it be aligned in the middle? (I tried the obvious vertical-align and line-height, didn't work)

Test: http://jsfiddle.net/uWszr/

Answer 1

select {
    width: 128px; height:150px;
    padding-top:6%;
}

option {
    height: 32px;
}

選択の高さ、選択のパディングトップ - すべてのオプション要素の全体の高さに応じて計算する必要があります。jQuery上で計算スクリプトを作成し、適切な値に置き換えた方が普遍性があると思います。少なくとも、css ユニバーサル ソリューションが表示されないことを意味します

Answer 2

オプションのテキストを揃えるには、選択にパディングを使用します。

select {
width: 128px;
padding:10px 0;
}

これは、テキストを中央に揃えるのに最適なソリューションではありません。しかし、それは一時的な解決策として役立ちます。