select標簽的字體居中問題

　　今天編寫JSP時，發現使用了<s:select>實現選擇框的某一選擇欄，其中的字體沒有垂直居中，在網絡上查找了一下關於select標簽垂直居中顯示內容的問題，發現不少人也遇到同樣的問題，有人干脆把select稱作最惡心的標簽，因為幾乎不能對它應用任何CSS樣式。下面看看select有多惡心。

　　

   <style type="text/css">
       
       select{
           height:50px;
           width:100px;
           font-size:15px;
       }
   </style>

    select>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="opel">Opel</option>
        <option value="audi">Audi</option>
    </select>

　　為了突顯select標簽無法垂直居中內容問題，這里故意把select的高度設為50px，遠大於字體的。結果見下圖，select里面的內容是靠左頂端對齊：

　　嘗試在option添加CSS樣式：vertical-align: middle; 一樣不見效，如下：

<style type="text/css">
       select{
           height:50px;
           width:100px;
           font-size:15px;
       }
       select option{
           vertical-align: middle;
       }
   </style>
    <select>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="opel">Opel</option>
        <option value="audi">Audi</option>
    </select>

　　事實上，所有用到select標簽的標簽庫：如struts2的<s:select>等，都存在同樣問題。但是，如果是在IE(這里是11)及chrome（這里是版本 35.0.1916.153），select標簽能夠自動垂直居中顯示。

　　在html5的select的內容顯示情況沒有得到改善。如果需要用到選擇框又要追求好看，可以考慮使用div+input標簽模擬select標簽功能，具體可以參考extjs的comboBox:

 

　　簡單通過firedebug可以看到extjs顯示select效果並沒有遇到select標簽，所以顯示效果非常優雅。