中心對齊下拉​​列表文本

Question

我有一個簡單的下拉列表，其中顯示了五個不同的遊戲控制檯。是否可以居中對齊文本？我試過對齊它，但是，這沒有幫助。

HTML

<select class="consoles"> 
    <option value="0">Xbox One</option> 
    <option value="1">Playstation 4</option> 
    <option value="2">PC</option> 
    <option value="3">Nintendo Wii</option> 
</select> 

CSS

.consoles { 
    width: 120px; 
    height: 37px; 
    text-align:center 
} 

Answer 1

試試這個.consoles {width: 120px; height: 37px; padding-left:10px;}

可以調整填充左，以滿足您的需求。 http://jsfiddle.net/PawelK/CN8mr/

Answer 2

這恐怕是不可能的純CSS，並且將不可能進行完全的跨瀏覽器兼容。

Answer 3

引用this StackOverflow question，這對於純CSS是不可能的。不過，您可以使用jQuery插件來設置下拉式樣。加載頁面後，該插件將動態地將select元素轉換爲span元素。