web-dev-qa-db-fra.com

Alignement vertical: le fond ne fonctionne pas

Je pensais que l'alignement vertical était censé fonctionner avec des éléments en ligne. Pourtant, pour une raison quelconque, tout dans le div gris est aligné sur le en haut, pas sur le bas.

<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>
htmlcssvertical-alignment
28
Adam Rackis

À moins que vous n'ayez affaire à une cellule de tableau, l'alignement vertical fait aligner l'élément par rapport aux éléments adjacents, en particulier le texte. Ainsi, les éléments de la division grise doivent être alignés les uns avec les autres , pas le bas de la division. Voir des exemples sur http://phrogz.net/css/vertical-align/index.html .

15
Tamzin Blake

Voici un exemple où vous pouvez accomplir cela en utilisant le code suivant

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

Voici une réponse moderne mise à jour en utilisant des boîtes 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;
}
8
Travis Mathis

Voici la fissure. Je cherchais une réponse (vertical-align) pas son alternative (bottom: 0). Voici donc la solution.

vertical-align est défini par rapport à son conteneur, pas à l'élément parent (ou wrapper). Il suffit donc de lui donner une hauteur de ligne, puis d'appliquer le 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
Siraj Alam