Horizontally text center for select option

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

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.

don't use

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

select {
    text-align: center;
}

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

Related