Выровнять по вертикали: дно не работает - PullRequest
Новая
       19

Выровнять по вертикали: дно не работает

27 голосов
/ 14 сентября 2011

Я думал, что вертикальное выравнивание должно работать со встроенными элементами.И все же по какой-то причине все в сером элементе выравнивается по верху , а не по низу. 

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

Ответы [ 4 ]

15 голосов
/ 14 сентября 2011

Если вы не имеете дело с ячейкой таблицы, вертикальное выравнивание выполняет выравнивание элемента по смежным элементам, особенно по тексту.Таким образом, элементы в сером div должны быть выровнены с друг с другом , а не с нижней частью div.Смотрите примеры на http://phrogz.net/css/vertical-align/index.html.

14 голосов
/ 15 сентября 2011

Вот пример, где вы можете сделать это, используя следующий код

ДЕМО: 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>
7 голосов
/ 17 января 2018

Вот современный обновленный ответ с использованием боксов 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;
}
4 голосов
/ 13 апреля 2017

Здесь 'трещина. Я искал ответ (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>
...