垂直对齐：底部不起作用

Posted 2023-03-05

【中文标题】垂直对齐：底部不起作用

【英文标题】：Vertical-align: bottom not working

【发布时间】：2011-11-17 05:34:20

【问题描述】：

我认为垂直对齐应该适用于内联元素。然而由于某种原因，灰色 div 中的所有内容都与 top 对齐，而不是底部。

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

【参考方案1】：

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

【讨论】：

具体来说，div不是其中之一的内联元素。

vertical-align 用于内联/文本，但当它不是真正关于文本时，可以（ab）在不涉及换行符的情况下使用“行高”，即水平底部-对齐一些内联块。

【参考方案2】：

这是一个示例，您可以使用以下代码完成此操作

演示： http://jsfiddle.net/SbNKa/1/

#theContainer 
    height: 100px;
    width: 500px;
    position: relative;
    border: 1px solid #900;

.content-bottom 
    position: absolute;
    width: 498px;
    bottom: 0; /*This is the part that glues it to the bottom*/
    border: 1px solid #000;

<div id="theContainer">
    <div class="content-bottom">Content</div>
</div>

【讨论】：

这个答案与问题无关。问题是关于如何正确使用vertical-align: bottom

@DotNetWise：这就是这个人想要完成的事情的答案，并不是所有的问题都是被问到的实际问题。希望这有助于解决问题。

当你这样做时，你会失去text-align: center。

【参考方案3】：

这里是裂缝。我正在寻找答案（vertical-align）而不是替代答案（bottom: 0）。所以这是解决方案。

vertical-align 是相对于其容器设置的，而不是父（或wrapper）元素。所以只需给它一些行高，然后应用vertical-align: bottom。

    div 
        background:yellow;
        margin:10px;
        line-height:100px;
    
    div > * 
        vertical-align: bottom;
        line-height: normal;
    

    a 
        background-color:#FFF;
        height:20px;
        display:inline-block;
        border:solid black 1px;
        padding:5px;
    

    span 
        background:red;
        width: 50px;
    

    <div>
    <a>Some link</a>
    <span>Some text </span>
    </div>

【参考方案4】：

这是使用 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;

【讨论】：

对于 Bootstrap 4+ 用户，它将是 <div class="h-100 d-flex justify-content-end align-items-end">CONTENT BOTTOM</div>