在选择元素内居中文本[重复]

Question

我的 HTML 表单中有一个选择元素，默认情况下，文本左对齐。 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