如何在所有浏览器的选择下拉列表中居中对齐文本?它的中心在Firefox中对齐,但它在Chrome和Safari中左侧。
CSS:
.challenge{
max-width: 850px;
width: 98%;
height: 50px;
background: #ffffff;
margin: 30px auto;
}
.challenge select {
width: 100%;
height: auto;
background: url(images/select_arrow.png) no-repeat right top #ffffff;
font-family: 'RexBold';
text-align: center!important;
text-align: -moz-center;
text-align: -webkit-center;
font-size: 30px;
padding-top: 7px;
color: #545454;
overflow: hidden;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
text-indent: 0.01px;
text-overflow: '';
}
答案 0 :(得分:1)
尝试使用以下代码。希望它能起作用
text-align-last: center; text-align: center;
-ms-text-align-last: center;
-moz-text-align-last: center; text-align-last: center;
答案 1 :(得分:0)
.challenge select {
width:100%;
background: url(images/select_arrow.png) no-repeat right top #ffffff;
font-family: 'RexBold';
text-align:center;
font-size:30px;
color:#545454;
border: 0 !important;
overflow: hidden;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
padding:10px;
}
替换为此代码
答案 2 :(得分:-1)
您可以将其放在div
中,然后将text-align
设置为中心。这对我有用。 [新手在这里]
答案 3 :(得分:-6)
这对我有用:
<html>
<head>
</head>
<body>
<Select style="width:500px;padding-left:20%;">
<option>center</option>
</Select>
</body>
</html>
只需添加填充选择,它就不适用于选项
如果有帮助,请立即投票,免费