Question

我想将“text”与select元素垂直对齐。他们都需要在不同的div中。这可能吗？

<fieldset>
<div style="display:inline-block;float:left;vertical-align:middle">
    text
</div>
<div style="display:inline-block;float:left">
    <select>
        <option>select
        </option>
    </select>
    properly aligned
</div>
</fieldset>

http://jsfiddle.net/ATN8n/1/

Answer 1

因为你的文本都在不同的div中，这两个div应该具有相同的高度，然后我们必须相应地更改vertical-align：

<div style="display:inline-block; float:left; height: 30px;">
    text
</div>
<div style="display:inline-block; float:left; height:30px;">
    <select>
        <option>select
        </option>
    </select>            
</div>

div:before {
 content:'';
 display:inline-block;
 height:100%;
 vertical-align:middle;
}

以下是fiddle

Answer 2

将文字换成跨栏标签，如下所示：

<span>text</span>

然后将它设为这样：

span {
    display: inline-block; 
    vertical-align: middle;
}

编辑：Fiddle

如何垂直对齐包含select元素的另一个div旁边的div中的文本

2 个答案: