中心对齐下拉​​列表文本

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个元素。