如何在包含select元素的另一個div旁邊垂直對齊div中的文本

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，這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

Answer 2

用這樣的跨度標籤包裝文本：

<span>text</span> 

然後樣式像這樣：

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

編輯：Fiddle