在div中水平对齐

Question

我有一个这样的盒子：

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

如何将它们对齐，使它们在" select“文本的基线和选择框(”1“)的内容之间水平对齐。(而不是框本身)。

我可以通过在它们周围包裹一个表格并创建两个单元格来解决这个问题，但我觉得这种方法非常粗糙。

我想要的可视化示例:查看顶部的statusbar @stackoverflow。它的名称|注销|关于| faq SEARCHBOX。现在:注意文本是如何顶部对齐的，搜索域是如何居中的(因为它占据了那个空间)。我希望文本居中对齐:D我的浏览器自动取款机是IE7

Answer 1

编辑：

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

然后是CSS：

#selectBox label
{
    vertical-align:bottom;
}

点击这里查看：jsFiddle

Answer 2

您不能将select中的文本与任何内容对齐。你能得到的最好的结果就是尝试不同的vertical-align值，但是我想在不同的浏览器中得到完全相同的对齐是不可能的。