当我添加宽度等于 100% 时，文本对齐中心不起作用 [重复]

Question

我得到了这个 html

<div class="select-wrapper">
    <select id="selectbox">
        <option value="1" selected="">Unit 1</option>
        <option value="2">Unit 2</option>
        <option value="3">Unit 3</option>
        <option value="4">Unit 4</option>
        <option value="5">Unit 5</option>
        <option value="6">Unit 6</option>
        <option value="7">Unit 7</option>
        <option value="8">Unit 8</option>
        <option value="9">Unit 9</option>
    </select>
</div>

以及下面的css

#selectbox{
    display: block;
    margin:0 auto;
    text-align: center;
    /*min-width: 120px;*/
    /*max-width: 300px;*/
    width:100%;
}

我需要选择框的宽度为其父元素的 100%，并且文本应该居中对齐。

当我只设置最小、最大宽度时，对齐中心正在工作，一旦我将宽度更改为 100%，它就不起作用了。

或者是否有任何其他解决方案可以使文本居中并最大化其宽度？

一个简单的例子就好了

Answer 1

将此添加到select：

text-align-last:center; // doesn't work on Safari

它将在选择本身中居中文本，但不会在下拉菜单中居中选项。

后者在原生选择中是不可能的。