所有浏览器的选择下拉列表中心对齐文本

时间:2014-05-27 07:34:10

标签: html css drop-down-menu cross-browser

如何在所有浏览器的选择下拉列表中居中对齐文本?它的中心在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: '';
}

4 个答案:

答案 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>

只需添加填充选择,它就不适用于选项
如果有帮助,请立即投票,免费