CODEWITHSUNDEEP
html
red
red

Reputation: 51

How to vertically align text to middle in HTML select?

I didn't find any explanation on the internet on how to vertical-align text in an HTML select. I don't want to align the text in the <option></option> because that is not hard. I want to align the text that is selected in the <select></select>.

I've looked at browsers like Firefox, Opera, Chrome and Internet Explorer and the text is only correct centered by default in Opera and Chrome. In Firefox it is going to top, in Internet Explorer it is going to bottom.

How can this be made to work the same way in all browsers?

Upvotes: 5

Views: 16297

Answers (6)

Tea Cii
Tea Cii

Reputation: 121

I found the following css as the easiest way:

select{
    padding-top: 4px;
}

ofcourse you would adjust the padding value as per your font. You can also target it like so: #SomeID select{ padding-top: 4px; }

There are more experienced peeps out there, but these are my two bits :-)

Cheers

Upvotes: 2

Abriel
Abriel

Reputation: 583

It's a similar answer to @ShawnBernard.

But what you need to do is create a specific width for the select element in the form. Once you do that, then add the text-align: center; into the select CSS and configure padding for the select element.

What creating CSS for the option form, that only makes the actual drop-down background bigger.

There's no easy way to tell you how much padding you should set it at because that will depend on the height you want to set them at as well as the font CSS styles.

UPDATE: Like @RajivPingale said, the options form isn't going to take because of specific browser routines. So, this capability won't work with all browsers.

Here's my jsFiddle: http://jsfiddle.net/abrielshipley/Y4eJm/4/

Upvotes: 1

Rajiv Pingale
Rajiv Pingale

Reputation: 1015

For one thing, text-align applies to block level elements only. But even if you assign display: block to the select and option elements, the texts probably won't be centered. The reason is that browsers use their built-in routines for rendering form fields, and these routines are affected by CSS rules to a limited extent only.

you can go for jQuery dropdown menus

Upvotes: 1

CasualBot
CasualBot

Reputation: 86

You'll have to use labels for alignment heres the fiddle: http://jsfiddle.net/E7mxq/2/

Upvotes: 0

ose
ose

Reputation: 4075

The only solution I have come across that can vertically align text in a <select> tag in Firefox (FF 11) is to use padding:

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 */
}

In the code above, you need to manually calculate the relevant values (or perhaps server-side or JS).

The only downside to this solution is that it seems that in Firefox the drop-down arrow in the control is also shifted down by the value of padding-top so it is by no means perfect.

Upvotes: 0

red
red

Reputation: 1

Yes, vertically align middle :-)

Example

If there were text like "dog, cat, tiger" in option and the first option is selected "dog" but the height of the <select> is set 34 pixels but the font-size is like 12 pixels so you see the text will be much smaller than the <select> and that's why it will be aligned in one browser to the top and in another at the bottom and in yet another it will be aligned in the middle. I want the text to be aligned in the vertical middle in all browsers.

Here is simple code that is showing the problem

<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>

Upvotes: 0

Related Questions