How to center select option text?

Not possible! . Doing this should work in some browsers and in others not (I assume only Firefox Desktop ):

.main {
    width: 100px;
}

.main option {
    text-align: center;
}

<select class="main">
    <option>Foo</option>
    <option>Bar</option>
    <option>Baz</option>
</select>

The reason for not working at most is what I already explained in detail in this link:

- How do I force elements to appear below IE?

Unlike most elements, <option> s is usually not rendered by the browser rendering engine , but rather by the larger application that is separated from such an engine, in other words who "renders" them is the "application" in the options within <select> the moment you "click" and turn it into a Widget (