垂直对齐:底部不起作用 [英] Vertical-align: bottom not working

问题描述

我认为Vertical-align应该与内联元素一起使用.但是由于某种原因，灰色div中的所有内容都对齐 top 而不是底部.

I thought vertical-align was supposed to work with inline elements. Yet for some reason everything in the gray div is aligned to the top, not the bottom.

<div style="position:absolute; top:130px; right: 80px; width: 230px; background-color:Gray; height:30px;" class="defaultText" id="pager">
    <span style="vertical-align:bottom;">Page Size:</span>
    <select style="vertical-align:bottom; font-size:8pt; margin-top: 0; margin-left:3px; height:16px; text-align:center;">
        <option value="50">50</option>
        <option value="100">100</option>
        <option value="200">200</option>
        <option value="500">500</option>
        <option value="10000">*</option>
    </select>
    <div style="float:right;">
        <span style="vertical-align:bottom; color:Blue; cursor: pointer; margin-right: 10px;"><</span>
        <input style="vertical-align:bottom; height:12px; font-size:8pt; width: 20px;" type="text" data-bind="value: pageNum" />
        <span style="vertical-align:bottom;"> of </span>
        <span style="vertical-align:bottom;" data-bind="text: numPages"></span>
        <span style="vertical-align:bottom; color:Blue; cursor: pointer; margin-left: 5px;">></span>
    </div>
</div>

推荐答案

除非您要处理表格单元格，否则vertical-align的作用是使元素相对于相邻元素(尤其是文本)对齐.因此，灰色div中的元素应与彼此对齐，而不是与div的底部对齐.请参见 http://phrogz.net/css/vertical-align/index.html .

Unless you're dealing with a table cell, what vertical-align does is aligns the element with respect to adjacent elements, particularly text. So, the elements in the gray div should be lined up with each other, not the bottom of the div. See examples at http://phrogz.net/css/vertical-align/index.html.

这篇关于垂直对齐:底部不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！