html - 所有浏览器的选择下拉菜单中的居中对齐文本

Question

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

Answer 1

尝试使用以下代码。希望它能奏效

text-align-last: center; text-align: center;

-ms-text-align-last: center;
-moz-text-align-last: center; text-align-last: center;