Text align center of select-box is not working on iPhone

Question

Text align center of select-box is not working on iPhone. Please help me out.

It is working on all devices without iPhone.

<style>.demo select {text-align:center;text-align:-moz-center;text-align:-webkit-center;width:200px;}</style>

<div class="demo">
<select>
    <option>demo</option>
    <option>demo</option>
    <option>demo</option>
    <option>demo</option>
    <option>demo</option>
</select>

Please edit your question and add code, no need to enter it in Comment — Vikrant, Mar 20 '15 at 10:39
There seems to be an [answer here](http://stackoverflow.com/questions/10813528/is-it-possible-to-center-text-in-select-box). So, it's a NO in plain CSS. — lshettyl, Mar 20 '15 at 11:14

score -1 · Answer 1 · answered Mar 20 '15 at 15:45

With the little code that you provided, these are the possible problems:

You do not need to add vendor prefix for text-align, it is supported by all the browsers, although you are doing it wrong anyway. Vendor prefixes come before the CSS property not before the value, like so:

-webkit-border-radius: 2px;
Based on the code you provided you did not close the div tag.
The text-align property specifies the horizontal alignment of text in an element. Which in your case the parent element is the div.demo. If you want the select element to be centered within the div, your div needs to have some specified width. For example:

div.demo{ width: 500px; margin: 0 auto; /* If you want it to be centered within its own parent*/ }

That is all I can suggest based on your little code!

Text align center of select-box is not working on iPhone

1 Answers1