Question

我有一个这样的盒子：

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

如何使它们对齐，使它们在彼此的中间水平，“选择”文本的基线和选择框的内容（“1”）。（而不是框本身）。

我可以通过在它们周围包裹一个桌子并制作两个单元格来解决这个问题，但我觉得这种方法很粗糙。

我想要的视觉示例：看看你的顶级状态栏@stackoverflow。它有NAME |退出|关于| faq SEARCHBOX。现在：注意文本是如何对齐TOP而搜索字段是中间的（因为它占用了那个空间）。我希望文本对齐中间：D我的浏览器atm是IE7

Answer 1

Editted：

<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

我不确定...请尝试使用样式浮点数：左边的div

float:left;

Answer 3

您无法将选择内的文本与任何内容对齐。你可以得到的最好的是为vertical-align尝试不同的值，但是恕我直言，在不同的浏览器中获得完全相同的对齐是不可能的。

div中的水平对齐

3 个答案: