是否可以在选择框中居中文本?

我试过这个:http://jsfiddle.net/ilyaD/KGcC3/

HTML:

<select name="state" class="ddList">
    <option value="">(please select a state)</option>
    <option class="lt" value="--">none</option>
    <option class="lt" value="AL">Alabama</option>
    <option class="lt" value="AK">Alaska</option>
    <option class="lt" value="AZ">Arizona</option>
    <option class="lt" value="AR">Arkansas</option>
    <option class="lt" value="CA">California</option>
    <option class="lt" value="CO">Colorado</option>
</select>

CSS:

select { width: 400px; text-align: center; }
select .lt { text-align: center; }

如你所见，它不起作用。是否有css唯一的方法来居中选择框中的文本?

当前回答

2020年，我使用:

select {
    text-align: center;
    text-align-last: center;
    -moz-text-align-last: center;
}

2020-02-15 05:29:17

其他回答

我遇到了这样一个问题，一个客户坚持这样做，他们用的是Mac和iPhone。

我最终使用了媒体查询和填充左侧的百分比填充。这是一个令人满意的解决方案吗?完全没有，但这让我开始了新的生活。

2021-01-16 13:55:32

不完全是居中，但是使用上面的例子，你可以在选择框中设置左边边距。

<style>.UName { text-indent: 5px; }</style><br>

<select  name="UserName" id="UserName" size="1">
    <option class="UName" selected value="select">Select User</option>
    <option class="UName" value="User1">User 1 Name</option>
    <option class="UName" value="User2">User 2 Name </option>
    <option class="UName" value="User3">User 3 Name</option>
</select>

2014-03-09 19:13:04

你必须把CSS规则放到选择类中。

使用CSS文本缩进

例子

<select class="day"> /* option 1 option 2 option 3 option 4 option 5 here */ </select>

CSS代码

select { text-indent: 5px; }

2013-02-14 12:57:12

这招对我很管用:

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

2018-05-14 00:31:31

2020年，我使用:

select {
    text-align: center;
    text-align-last: center;
    -moz-text-align-last: center;
}

2020-02-15 05:29:17

是否可以在选择框中居中文本?

推荐文章

最新文章

标签