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

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

2 个答案: