Horizontally text center for select option

Question

I have this simple fiddle with standard <select> html element, all what am trying to do is give center alignment for <option> tags.

I've tried already text-indent: 20px but its center only the visible tag in the select!

How can I center it?

Answer 1

Solution 1: (A simple solution)

select {
   ...    
   padding: 0 0 0 20px;
}

DEMO 1

Solution 2: (added 27-10-2017)
Only the selected number will be centered.
* Probably not yet supported by Safari

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

DEMO 2

Answer 2

You can just use

select {
    text-align: center;
}

See modified JSFiddle

Unfortunately, this works for Firefox only. For Chrome, you must use padding-left similar to @CTravel's solution

select {
    padding-left: 20px;
}

Modified JSFiddle

But this doesn't work on the option elements in Firefox, so this isn't a cross-browser solution either.

Answer 3

don't use

select {
   ...    
   padding: 0 0 0 20px;
}

or

select {
    text-align: center;
}

they are no working in select. maybe you can use JQuery's select style:JQuery UI Select

Answer 4

Check this link out:

http://filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/

as stated elsewhere, it is not possible with plain CSS. (Not for all browsers anyhow)