CODEWITHSUNDEEP
htmlcss
Mahmoud
Mahmoud

Reputation: 1395

Horizontally text center for select option

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?

Upvotes: 8

Views: 53738

Answers (4)

Carl0s1z
Carl0s1z

Reputation: 4723

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

Upvotes: 13

Qilin Lou
Qilin Lou

Reputation: 406

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

Upvotes: 2

Olaf Dietsche
Olaf Dietsche

Reputation: 74118

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.

Upvotes: 4

William Riley
William Riley

Reputation: 918

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)

Upvotes: 1

Related Questions