垂直对齐：底部不起作用

Question

我认为 vertical-align 应该与行内元素一起使用。然而由于某种原因，灰色 div 中的所有内容都与 顶部 对齐，而不是底部。

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

原文由 Adam Rackis 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

除非您处理的是表格单元格，否则 vertical-align 的作用是使元素相对于相邻元素（尤其是文本）对齐。所以，灰色div中的元素应该是 相互 对齐的，而不是div的底部。请参阅 http://phrogz.net/css/vertical-align/index.html 中的示例。

原文由 Tamzin Blake 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这是使用 Flex 框的现代更新答案。

 div {
  height: 100%; // containing div must fill the full height of the parent div
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

原文由 Travis Mathis 发布，翻译遵循 CC BY-SA 3.0 许可协议