javascript 在选择中对齐文本中心

Align Text Center in Select

提问by Spedwards

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

我目前为自己制作了一个漂亮的样式选择框：

http://jsfiddle.net/B2rS6

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.

有没有一种方法可以设置它的样式，以便它可以在跨浏览器的选择中居中显示文本？我不在乎它是 javascript 还是 css。只需要一些有用的东西。

回答by Oneezy

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

我认为*您可以实现此目的的唯一方法是使用插件，我碰巧知道一个很棒的插件：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).

一个普通的选择框很难设计风格……不过很快我们就会有能力用臭名昭著的Shadow DOM来做到这一点。这是一个普通的选择菜单，添加了 JS 的强大功能（感谢 Ben Plum）。

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

“资源”中包含外部文件，请随意抓取

http://jsfiddle.net/wChTk/

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!

我希望这有帮助！

回答by Виктор Новиков

Using CSS. Set widthand text-align

使用 CSS。设置width和text-align

JSFiddle

JSFiddle

---

---

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

我现在阅读了一些文档......害怕，使用纯 CSS 是不可能的。你可以使用一些东西，一个人在这篇文章中推荐的东西并重新设计

回答by Saritha.S.R

set text-align: center;for select

设置text-align: center;为选择