logo标签列表

在所有浏览器中将下拉选择框中的文本居中对齐

htmlcssdrop-down-menucross-browser
4

如何使下拉选择框中的文本在所有浏览器中居中对齐？在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: '';
}
1
请展示你的HTML和CSS代码？ - Albzi
据我所知，在 Webkit 中这是不可能的。 - sevenseacat
据我所知，我们可以这样做，但它不支持所有浏览器。 - user3662273
@user3662273 怎么做？ - Aasim Hussain Khan
4年过去了，还是没有办法做到这一点吗？ - thinsoldier
5个回答
2

试试下面的代码。希望它能够正常工作。

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

-ms-text-align-last: center;
-moz-text-align-last: center; text-align-last: center;
2
你能加上一些解释吗？ - Mr Mush
在HTML部分：<select> <option class="center">选择</option> <option class="center">选项1</option> <option class="center">选项2</option> <option class="center">选项3</option> <option class="center">选项4</option> <option class="center">选项5</option> </select> 以下是此内容的CSS：select .center { 宽度：400像素; 高度：50像素; -ms-text-align-last: center; -moz-text-align-last: center; text-align-last: center; 边距：0自动; } - Thomas Mathew
它用于将选择选项居中对齐。 - Thomas Mathew
0
请尝试这个。
.challenge select {
    text-align: -webkit-center;
    flex-direction: column;
}
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;
}

使用这段代码替换

1
没有帮助。在Safari和Chrome中仍然是左对齐。 - Aasim Hussain Khan
-1

你可以将它放在 div 中，然后将 text-align 设置为居中。这对我很有效。[新手在此]

-7

这个对我有用：

<html>
<head>
</head>
<body>
<Select style="width:500px;padding-left:20%;">
<option>center</option>
</Select>
</body>
</html>

只需为选择器添加填充，对选项无效
如果这有帮助，请投票支持，这是免费的

1
将固定填充添加到左侧并不会使任何内容居中。 - sevenseacat
这有所帮助，不是吗？ - Peter Georges Bou Saada
不行，这些选项长度不同。没有起作用。 - Aasim Hussain Khan
@AasimHussainKhan 调整它们 - Peter Georges Bou Saada
我不确定你是否理解“居中”的含义。 - sevenseacat
显示剩余4条评论
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接