センタクセレクトオプション付きテキストの整列

Question

垂直方向の選択選択オプションを使用してテキストを整列します。

リンク：this example fiddleのようにhttp://mink7.com/projects/test/dashboard.html

Answer 1

使用のラベル。マークアップ：

<form action=""> 
    <label for="startDate">Start Date:</label> 
    <select id="startDate"> 
     <option value="Mar 04">Mar 04</option> 
    </select> 
    <label for="endDate">End Date:</label> 
    <select id="endDate"> 
     <option value="Aug 04">Aug 04</option> 
    </select> 
</form> 

これが動作しない場合は、その後、いくつかの継承されたスタイルが干渉してthis demoに示すようvertical-align: middleを設定しようとするがあります。

Answer 2

IEとChromeでは、選択タグのテキストは自動的に中央に揃えられ、Firefoxでは並べられません。 IEとChromeを妥協することなく、Firefoxのみをパディングしたい場合： FF用のブラウザ固有のハックを使用して、パディングトップを指定します。

@-moz-document url-prefix() { 
     .select select{ 
       padding-top: 8px; 
       } 
     }