无法将我的菜单选项项居中答案

【问题标题】：Cannot center my menu option items无法将我的菜单选项项居中
【发布时间】：2013-09-29 23:13:30
【问题描述】：

我无法将在我的下拉菜单中的项目居中。我已经尝试了这个网站上建议的很多东西，但似乎都没有。

这是我的 CSS：

select {

    -webkit-appearance: button;
    -webkit-user-select: none;
    -webkit-padding-start: 6px;
    -webkit-padding-end: 6px;
    background-color: #050505;
    color: #ffffff;
    border: 1px solid #ffffff;
    box-shadow: 11px 10px 5px #000000;
    text-shadow:4px 4px 10px #000000;
    font-family: "UglyQua", Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: bold;
    padding-top: 2px;
    padding-bottom: 2px;
    text-align: center;
    white-space: nowrap;
}

..还有我的 HTML：

<!DOCTYPE html>
<html>

<head>
<script language="javascript" type="text/javascript">
function jump(form) {
var myindex=form.menu.selectedIndex
if (form.menu.options[myindex].value != "0") 
{
window.open(form.menu.options[myindex].value, 
target="iframe1");
}
}
//-->
</script>
</head>

<center>
<body>

<form name="lissamenu2" ACTION=URI>
<select name="menu" onchange="jump(this.form)">

<option value="0" selected>Select site:</option>   
<option value="http://www.google.com/">Google</option>
<option value="http://www.youtube.com/">YouTube</option>
<option value="http://www.stackoverflow.com/">StackOverflow</option>

</select>
</form>

</center>
</body>

</html>

【问题讨论】：

标签： javascript html css drop-down-menu centering

【解决方案1】：

SELECT/OPTION 不能在常规 HTML 元素中接受相同的样式，因为这些元素与操作系统的联系更紧密。您会注意到SELECT 在 Mac 和 PC 上的外观会有所不同。如果您想要更多控制权，最好使用基于 JavaScript 的替换。

见：http://www.jankoatwarpspeed.com/reinventing-a-drop-down-with-css-and-jquery/

【讨论】：

有些 jQuery 插件可以接受标准选择并将它们转换为基于脚本的菜单。