html - 如何在包含选择元素的另一个 div 旁边垂直对齐 div 中的文本

Question

我想将“文本”与选择元素垂直对齐。它们都需要位于单独的 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 中，这 2 个 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