Центрирование текста внутри элементов select

Question

У меня есть элемент select в моей HTML-форме, и по умолчанию текст выравнивается влево. text-align: center; не центрирует его как ввод текста.

Из других ответов на переполнение стека некоторые пользователи говорят, что используют свойство 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

, если вы не хотите, чтобы площадка eliment вы всегда можете использовать расширение Javascript на основе на который обычно использует <div> элементов вместо фактического <select> элемента и позволяет легко укладывать его.

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