html-CSS：如何在標簽標簽中垂直對齊文本和表單元素？

Question

我的html文檔中有一個<label> ，其中有一些文本和表單元素。
如何在中間垂直對齊它們？

<label>
    Show
    <select name="list_length" size="1" aria-controls="admin_id">
        <option value="10" selected="selected">10</option>
        <option value="25">25</option>
        <option value="50">50</option>
        <option value="100">100</option>
    </select>
    entries per page.
</label>

<label>
    Search:
    <input type="text" aria-controls="id_281">
</label>

我也在CSS中添加了它：
display: inline-block和vertical-align: middle

Answer 1

將高度和線高設置為相同的值：

height: 50px;
line-height: 50px;

或嘗試以下垂直居中：

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Answer 2

的HTML

<label>
    <span>Show</span>
    <select name="list_length" size="1" aria-controls="admin_id">
        <option value="10" selected="selected">10</option>
        <option value="25">25</option>
        <option value="50">50</option>
        <option value="100">100</option>
    </select>
    <span>entries per page.</span>
</label>

<label>
    <span>Search:</span>
    <input type="text" aria-controls="id_281">
</label>

的CSS

label span,
label input,
label select{
    display: inline-block;
    vertical-align: middle;
}