将文本居中在选择元素中

Question

我的HTML表单中有一个select元素，默认情况下，文本左对齐。 text-align: center;并不像文本输入那样居中。

从Stack Overflow上的其他答案中，有些用户说要使用text-indent属性，但是虽然它会移动文本，但它不适合对齐不同长度的文本。

尽管CSS最好，但javascript / jQuery解决方案也没问题。

最后，我如何在表单选择元素中居中文本？

HTML代码：

<select name="country">
    <option value="Afganistan">Afghanistan</option>
    <option value="Albania">Albania</option>
    <option value="Algeria">Algeria</option>
</select>

Answer 1

<强> HTML：

<select name="country">
<option value="Afganistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>

<强> CSS：

   select {

    height: 37px;
    padding: 0 20px 0 20px;
}

jsfiddle

如果您不想填充内容，则可以始终使用基于Javascript的扩展程序，该扩展程序通常使用<div>元素而不是实际的<select>元素，并允许您轻松设置样式。

https://formstone.it/components/dropdown/#options