Geek Answers Handbook

How to vertically align text in the middle in HTML format?

I did not find any explanation on the Internet about how to vertically select text in HTML to select . I do not want to align the text in <option></option>, because it is not difficult. I want to align the text selected in <select></select>.

I browsed browsers such as Firefox, Opera, Chrome and Internet Explorer, and the default text is only the default in Opera and Chrome. In Firefox it will be up, in Internet Explorer it will decline.

How to do this to work the same in all browsers?

+5
source share
6 answers

I found the following css as the easiest way:

select{
    padding-top: 4px;
}

, . :   #SomeID {       padding-top: 4px;   }

, : -)

+2

@ShawnBernard.

select . text-align: center; CSS select.

CSS , .

, , , , CSS .

: @RajivPingale, . , .

my jsFiddle: http://jsfiddle.net/abrielshipley/Y4eJm/4/

+1

, text-align . : , , , . , CSS .

jQuery

+1

, : -)

, ", , ", "", <select> ​​ 34 , 12 , . , <select> , , , - . , .

,

<html>
    <body>
        <style>
            .select{
                height:34px;
                font-size:12px;
            }
        </style>

        <select class="select">
            <option>dog</option>
            <option>cat</option>
            <option>tiger</option>
        </select>
    </body>
</html>
0

, , <select> Firefox (FF 11), :

select.yourclass
{
    font-size: 1.1em; /* Size of the text */

height: 41px; /* The height you want the <select> to be */
padding-top: 7px; /* how far from the top you want the text to appear */
}

(, , JS).

The only drawback of this solution is that it seems that in Firefox the drop-down arrow in the control also moves down by a value padding-top, which is why it is by no means perfect.

0
source

You will need to use labels to align the heres script: http://jsfiddle.net/E7mxq/2/

0
source

More articles:


All Articles