html - 選択オプションの水平方向のテキスト中央

Question

私は標準のhtml要素を使ったこの単純なフィドル<select>を持っていますが、やろうとしているのは<option>タグの中央揃えです。

私はすでに試しましたtext-indent: 20pxが、その中心は選択の目に見えるタグだけです!

どうすれば中央に配置できますか?

score 12 · Accepted Answer

解決策 1: (簡単な解決策)

select {
   ...    
   padding: 0 0 0 20px;
}

解決策 2: (2017 年 10 月 27 日追加)
選択した番号のみが中央に配置されます。
* Safari ではまだサポートされていない可能性があります

select {
   ...
   text-align: center;
   text-align-last: center;
}

score 4 · Accepted Answer

あなたはただ使うことができます

select {
    text-align: center;
}

残念ながら、これは Firefox でのみ機能します。Chrome の場合、padding-left@CTravel のソリューションと同様のものを使用する必要があります

select {
    padding-left: 20px;
}

しかし、これはoptionFirefox の要素では機能しないため、クロスブラウザーソリューションでもありません。

score 2 · Accepted Answer

使用しないでください

select {
   ...    
   padding: 0 0 0 20px;
}

また

select {
    text-align: center;
}

それらは選択では機能しません。JQuery の select スタイルを使用できるかもしれません: JQuery UI Select

score 1 · Accepted Answer

このリンクをチェックしてください：

他の場所で述べたように、プレーンな CSS では不可能です。（とにかくすべてのブラウザに対応しているわけではありません）

4 に答える 4