html - 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;
}