Align Text Center in Select

Question

I have currently got myself a nice styled select box which I made:

However, if I were to set the width longer than the relative or have a really long option like the below, the text would not be centered.

<option>This is a really long option that will distort the width of the selections</option>

Is there a way I can style it so that it will center the text in the select across browser? I don't care if it's javascript or css. Just need something that will work.

Your question is very confusing, I don't see any problem with alignment here, if you have an option of a long text, the select will grow to contain that long text and except that, it looks fine. If you want to limit the width of the select, try using `max-width` property. — King King, Apr 02 '14 at 03:53
@KingKing The text in the `select` is what I'm trying to center. I don't care for the width of the element. — Spedwards, Apr 02 '14 at 03:56
you want text align center of option value. right? @Spedwards — Boopathi Rajan, Apr 02 '14 at 04:03
You may use a custom select like [this one](http://ivaynberg.github.io/select2/) and probably you can make it's text center aligned. — The Alpha, Apr 02 '14 at 04:06
[Here](http://www.roblaplaca.com/docs/custom-selectbox/) is another one. — The Alpha, Apr 02 '14 at 04:08
http://jsfiddle.net/boopathirajan/3mAm8/ check this @Spedwards — Boopathi Rajan, Apr 02 '14 at 04:10
You just need to center your option box http://jsfiddle.net/B2rS6/12/ like this ? — Sulthan Allaudeen, Apr 02 '14 at 04:58

score 4 · Accepted Answer · answered Apr 02 '14 at 05:38

The only way I think* you can achieve this is with a plugin, I happen to know of an amazing one: http://formstone.it/components/selecter

A normal select box is very hard to style... soon though we will have the power to do so with the infamous Shadow DOM. Here is a normal select menu with the power of JS added (Thanks to Ben Plum).

There are external files included in the "resources", feel free to grab them

http://jsfiddle.net/wChTk/

    <div class="row">
        <div class="col50">
            <select>
                <option value="de_DE-test">Category 1</option>
                <option value="en_US-test">Category 2</option>
                <option value="es_ES-test">Category 3</option>
                <option value="es_MX-test">Category 4</option>
                <option value="fr_FR-test">Category 5</option>
                <option value="fr_CA-test">Category 6</option>
                <option value="it_IT-test">Category 7</option>
                <option value="pt_BR-test">Category 7</option>
                <option value="sv_SE-test">Category 7</option>
                <option value="zh_CN-test">Category 7</option>
            </select>
        </div>
    </div>

I hope this helps!

score -1 · Answer 2 · edited May 23 '17 at 11:52

-1

Using CSS. Set width and text-align

JSFiddle

I read some documentation now... And afraid, isn't possible with plain CSS. You can use something, what one man recommended in this post and redesign

edited May 23 '17 at 11:52

Community

1
1

answered Apr 02 '14 at 04:38

Виктор Новиков

273
6
18

score -4 · Answer 3 · answered Apr 02 '14 at 04:45

-4

set text-align: center; for select

answered Apr 02 '14 at 04:45

Saritha.S.R

800
1
6
19

Align Text Center in Select

3 Answers3