html-CSS：如何在标签标签中垂直对齐文本和表单元素？

Question

I have a <label> in my html document, where I have some text and form elements in it.
How can I vertically align them in middle?

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

I have added this in the css too:
display: inline-block and vertical-align: middle

Answer 1

Set height and line height on the same value:

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

Or try this vertical centering:

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