8

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?

Peter DeWeese
  • 18,141
  • 8
  • 79
  • 101
Mahmoud
  • 1,385
  • 2
  • 10
  • 22
  • It's been asked and answered [here](http://stackoverflow.com/q/1911111/1612146) – George Nov 05 '13 at 13:59
  • @oGeez if you meant this solution `  ` so no this not what am looking for. any thank thanks for your time. – Mahmoud Nov 05 '13 at 14:05
  • An answer isn't always exactly what your looking for, there is no center align for ` – George Nov 05 '13 at 14:07
  • yea i got it already. once again thanks for your time. Cheers – Mahmoud Nov 05 '13 at 14:10

4 Answers4

12

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

Carl0s1z
  • 4,683
  • 7
  • 32
  • 47
  • C Travel! thank you. damn how could i did't think about this one. once again thanks – Mahmoud Nov 05 '13 at 14:06
  • No problem, its not a beautiful solution, but as i said 'a simple' one it is. – Carl0s1z Nov 05 '13 at 14:07
  • 1
    easy is not an option i agree. but when the client is on hurry and there's no time to explain so this is the best solution :) Cheers – Mahmoud Nov 05 '13 at 14:09
  • Is this really what you want, check out what happens when applying options with extreme long values in this [updated DEMO](http://jsfiddle.net/P5k4D/260/). Setting the `width` property to a fixed value causes strange appearances like this. – luukvhoudt Oct 01 '15 at 10:22
  • @Fleuv it was an example where the width is irrelevant, because i needed to show what you could do with padding. All the other css used in this demo is irrelevant for this case... – Carl0s1z Oct 01 '15 at 12:31
  • This perfectly centers the "longest" element. All others are left justified. – pollaris Oct 10 '17 at 06:03
4

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.

Olaf Dietsche
  • 72,253
  • 8
  • 102
  • 198
  • 2
    This pretty clearly does not give "center alignment for the – Colton McCormack Jul 25 '14 at 21:44
  • 1
    @ColtMcCormack You pretty clearly use a different browser than I do. E.g. Chrome doesn't honor the `text-align` in either `select` or `option`. There, you must use a kludge like `padding-left`. I can't say for IE or Opera, since I don't use either one. – Olaf Dietsche Jul 26 '14 at 09:10
  • @OlafDietsche I believe that fix is indeed Firefox only, making it work on a small fraction of web clients (10-25% as of this writing according to a few different sources). My only qualm was that the original answer seemed to indicate that it would always work, which may have confused CSS beginners who tried it. I have removed my TD now that you have clarified that this is for FF only (thanks!). As an aside, the reason this doesn't work is because text-align only affects inline elements, of which – Colton McCormack Jul 29 '14 at 00:35
  • Chrome will honor `text-align-last` for the ` – Alex Jorgenson Aug 15 '17 at 16:27
2

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

Qilin Lou
  • 396
  • 3
  • 15
1

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)

William Riley
  • 878
  • 8
  • 13