Horizontal text center for option selection

Question

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

I already tried text-indent: 20pxbut its center is only the visible tag in select!

How can I center this?

+5

Mahmoud Nov 05 '13 at 13:55

4 answers

You can just use

select {
    text-align: center;
}

, Firefox. Chrome padding-left, @CTravel

select {
    padding-left: 20px;
}

option Firefox, - .

+4

Olaf Dietsche 05 . '13 14:03

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

select {
    text-align: center;
}

select. , JQuery: JQuery UI

+2

phony 29 . '14 2:23

:

, CSS. ( )

+1

William Riley 05 . '13 14:04

C travel · Accepted Answer · 2013-11-05T14:01:25+0000

Solution 1: (simple solution)

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

Solution 2: (added on 10/27/2017)
Only the selected number will be centered.

* Probably not yet supported by Safari

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