Setting DropDownListFor CSS for options

Question

I have the following that sets my dropdown to a ridiculous width:

<div class="editor-field">
  @Html.DropDownListFor(x => x.TypeId, new SelectList(Model.Type, "TypeId", "TypeName"), null, new {  @style = "width: 500;" })
                                </div>

How do I get the items that appear as options in the populated drop down to move their alignment e.g. center align the text?

This is what I am aiming for, what I think should work, which can be found here.

Center dropdown item text

But as you can see, the option text is still over to the left. Any ideas?

See also this [SO post](http://stackoverflow.com/questions/1911111/how-to-make-sure-select-option-text-align-in-the-center-in-ie) about centering the text in the select options in IE (tl;dr: you can't.) — Roddy of the Frozen Peas, Jul 24 '12 at 16:16

Mr. Alien · Accepted Answer · 2012-07-24T16:09:21.543

0

Do you want something like this?

My Fiddle

My New Fiddle

Also NOTE, you are using 500px width, what's that for?

edited Jul 24 '12 at 16:09

answered Jul 24 '12 at 15:32

Mr. Alien

147,524
33
287
271

Hello Mr. Alien. The width of the dropdown is just a ridiculous entry so I can see clearly that the text would be either left, right or center :) – Ricardo Deano Jul 24 '12 at 15:37
Not really no Mr. Alien. So I have taken your fiddle and expanded it slightly http://jsfiddle.net/ricardodeano/r7XeZ/13/. – Ricardo Deano Jul 24 '12 at 15:45
I'm after the "This is my first" to be slap bang in the middle of that massive dropdown and text-align: center; doesn't appear to be doing what I would like it to do. – Ricardo Deano Jul 24 '12 at 15:46
can you show an image of exactly how you want because this seems appropriate to what you asked – Mr. Alien Jul 24 '12 at 15:48
Sure - give me a couple of seconds. – Ricardo Deano Jul 24 '12 at 15:49
@RoddyoftheFrozenPeas oh you want cross browser..I'll try it – Mr. Alien Jul 24 '12 at 16:17

score 0 · Answer 2 · answered Jul 24 '12 at 16:03

0

I am not quite sure what is you goal here is.

But if I understood correct

<select class="ddl">
    <option>Option1</option>
    <option>Option2</option>
</select>

css

.ddl{text-align: center; width:250px;}
option{text-align: center;}

Sample : Click Here

answered Jul 24 '12 at 16:03

huMpty duMpty

14,061
13
55
93

Is it work in Firefox?? Anyway, it that what you expect? I mean the one I created in jsfiddle – huMpty duMpty Jul 24 '12 at 16:14

Setting DropDownListFor CSS for options

2 Answers2