Vertical-align: bottom not working

问题

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>

回答1:

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.

回答2:

Here's an example where you can accomplish this by using the following code

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

回答3:

Here's a modern updated answer using Flex boxes.

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

回答4:

Here' the crack. I was looking for an answer (vertical-align) not it's alternate (bottom: 0). So here's the solution.

vertical-align is 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.

    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>

来源：https://stackoverflow.com/questions/7420324/vertical-align-bottom-not-working

标签

html

css

vertical-alignment