select で文字を中央寄せにしたい

Question

いつもお世話になっております。

表題の通り、<select>で表示される各選択枝を中央寄せしたくて色々調べました。

webkit系で行う場合にはwebkit-centerを使用すると書かれていたので
下記のようにいたしました。

<select style="text-align:center;text-align:webkit-center;"> <option value="1">123456</option> </select>

ところが、firefoxでは中央表示できるものの、chromeでは中央表示になりません。どこを修正すればよいのかをお教えいただけたらと主ます。
よろしくお願いします

Answer 1

stackoverflowなどで調べたところ、確かにChromeなどweblitブラウザでセレクトタグ内でのセンター寄せはサポートしていないようです。
なので別の方法を取るしか無いということなのですが、2点ほど代案を

①paddingによる調整。
…たぶん微妙ですよね^^;

②ul liタグとjQueryによる擬似セレクト要素の生成
stackoverflowによるとこちらがクロスブラウザ対応としてもっともポピュラーらしいですよ