Html 垂直对齐：底部不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7420324/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vertical-align: bottom not working
提问by Adam Rackis
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.
我认为 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>
采纳答案by Tamzin Blake
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.
除非您正在处理表格单元格，否则vertical-align 的作用是将元素与相邻元素（尤其是文本）对齐。因此，在灰色的div元素应该与一字排开彼此的div，而不是底部。请参阅http://phrogz.net/css/vertical-align/index.html 中的示例。
回答by Tamzin Blake
Here's an example where you can accomplish this by using the following code
这是一个示例，您可以使用以下代码完成此操作
DEMO:http://jsfiddle.net/SbNKa/1/
演示：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>
回答by Travis Mathis
Here's a modern updated answer using Flex boxes.
这是使用 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;
}
回答by Siraj Alam
Here' the crack. I was looking for an answer (vertical-align) not it's alternate (bottom: 0). So here's the solution.
这是裂缝。我正在寻找答案 ( vertical-align) 而不是替代 ( bottom: 0)。所以这是解决方案。
vertical-alignis set with respect to its container, not the parent (or wrapper) element. So just give some line-height to it and then apply the vertical-align: bottom.
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>