Align Text Center in Select

Question

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

http://jsfiddle.net/B2rS6

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.

Solution

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!