horizontal align in a div

Question

I have a box like this:

<div id="selectBox">
Select:
<select>
<option>1</option>
<option>2</option>
</select>
</div>

How do i get them aligned so that they are horizontal in the middle of each other, the baseline of the "Select" text and the content of the select box ("1").(and not the box itself).

I can solv this by wrapping a table around them and make two cells but i feel that method is very crude.

Visual example of what i want: take a look at your top statusbar @stackoverflow. it has NAME | log out | about | faq SEARCHBOX. now: notice how the text is aligned TOP and the searchfield is middle(because it takes up that space). I want the text to be aligned middle :D my browser atm is IE7

Answer 1

am not sure...please try with style float:left to the div

float:left;

Answer 2

You can't align the text inside the select with anything. The best you can get is trying different values for vertical-align, but IMHO it will be impossible to get exactly the same alignment in different browsers.

Answer 3

Editted:

<div id="selectBox">
    <label for="select">Select:</label>
    <select id="select">
        <option>1</option>
        <option>2</option>
    </select>
</div>

then the CSS:

#selectBox label
{
    vertical-align:bottom;
}

See it here: jsFiddle