text-align center does not works on mobile browsers

Question

I wrote text-align=center and tried on desktop browsers and worked successfully but didn't work on mobile browsers (safari and chrome on iPhone).

How to write right css to center text on mobile browsers?

.mobileCss{
    width:50%;
    text-align: center;
}

<select class="mobileCss">
    <option>aaaaaaaa</option>
    <option>bbbbbbbb</option>
</select>

Please, provide more information(HTML, CSS, Jquery, Jsfiddle and etc). — Alex, Oct 14 '15 at 07:22
Possible answer - http://stackoverflow.com/a/10813603/3194491 — tonyedwardspz, Oct 14 '15 at 07:45

score 0 · Answer 1 · answered Oct 14 '15 at 07:55

0

Best thing to try is use padding-left on your select.

answered Oct 14 '15 at 07:55

Bryan Labuschagne

203
1
8

score 0 · Answer 2 · answered Oct 14 '15 at 08:19

There is no actual way of accomplishing text centering within regular select box in plain CSS. You will have to use javascript/jQuery whether you want or not.

You can:

1) Use a javascript/jQuery plugin to calculate size and center the text everytime it changes value

2) Create a completely custom independent select box

text-align center does not works on mobile browsers

2 Answers2