How could i change the alignment on my listbox

Question

like what i said on the title. I tryd to used text-align if you can notice in my code below.

<SELECT style="font-size: 32px; 

           margin-left: 5px;
           text-shadow: 1px 0px 3px gray;
           font-family: Times New Roman;
           height: 43px;
           width: auto;`enter code here`
           color: #000;
           font-weight: bold;
           border: none;
           background-color: transparent;
           text-align:center;">

<OPTION Value="">CLASSROOM RATIO</OPTION>
<OPTION Value="">ENROLMENT END OF SCHOOL YEAR</OPTION>
<OPTION Value="">ENROLEMNT OF ALS LEARNERS</OPTION>
<OPTION Value="">FURNITURE RATIO</OPTION>
<OPTION Value="">NUMBER OF CLASSES BY SHIFT</OPTION>
<OPTION Value="">NUMBER OF CLASSES</OPTION>
<OPTION Value="">NUMBER OF COMPLETERS/PROMOTEES/GRADUATES</OPTION>
<OPTION Value="">NUMBER OF DROPOUTS</OPTION>
<OPTION Value="">NUMBER OF TEACHERS BY GRADE LEVEL</OPTION>
<OPTION Value="">NUMBER OF TRANSFEREES IN</OPTION>
<OPTION Value="">NUMBER OF TRANSFEREES OUT</OPTION>
<OPTION Value="">TEACHER DEPLOYMENT</OPTION>


</SELECT>

the out is like this:

 __________________________________
|CLASS ROOM RATIO                  |
```````````````````````````````````

i want my list items will be in centered :

 __________________________________
|        CLASS ROOM RATIO          |
```````````````````````````````````

I've been searching for 4hours , can someone give me an answer for this code ? pls help me.

ow im sorry , its just mistake in typing my code here, but it doesnt matter. sorry . — Paul, Feb 12 '15 at 09:11
It is not possible using css, but can be done with jQuery - http://stackoverflow.com/questions/10813528/is-it-possible-to-center-text-in-select-box — Matjaž, Feb 12 '15 at 09:12
i can't use text indent bro , because some options are long text. — Paul, Feb 12 '15 at 09:18

score 1 · Accepted Answer · answered Feb 12 '15 at 09:11

1

It is not possible to align it using text-align. So the only way out is using text-indent

option
{
    text-indent: 5px; 
}

Add the above to your option's css

answered Feb 12 '15 at 09:11

m0bi5

8,900
7
33
44

the problem with indent is when i select the long text for example `NUMBER OF COMPLETERS/PROMOTEES/GRADUATES` it does not suit in the list box. btw txt bro – Paul Feb 12 '15 at 09:16
@Paul like for a long text , give text-indent:1px , for a short one give text-indent:5px and so on. So basically set a different value for different options – m0bi5 Feb 12 '15 at 09:26

How could i change the alignment on my listbox

1 Answers1