Vertical aligner en bas de l'UL à l'intérieur de la DIV

J'ai un div avec height:40px; et un ul avec line-height:28px;. Je voudrais placer de l'ul vers le bas, à l'intérieur de la div. J'ai essayé vertical-align:bottom;, mais il n'aide pas.

Mon autre idée est la marge du haut, mais si c'est possible, avec vertical-align, je vais choisir que.

Mon démo: http://jsfiddle.net/YpEd7/

InformationsquelleAutor user1452062 | 2014-05-28
  1. 2

    Ajouter de la hauteur de ligne pour le conteneur. Une fois que vous avez la hauteur de la ligne de 40px sur le conteneur, le vertical align bas s'aligner vers le bas depuis votre conteneur est également 40px de haut. Il n'étais pas de travail depuis la hauteur de la ligne du récipient est inférieure à 40px donc, l'amt n'a aligner vers le bas de la ligne par défaut-hauteur

    http://jsfiddle.net/YpEd7/2/

    #container {
    background:gray;
    height:40px;
    line-height: 40px;
}
    InformationsquelleAutor Huangism
  2. 1

    Le même que j'ai posté dans le commentaire ci-dessus^

    #container {
    background:gray;
    height:40px;
    position: relative;
}
ul {
    margin:0;
    padding:0;
    list-style:none;
    position: absolute;
    bottom: 0px;
}

    http://jsfiddle.net/25VV5/2/

    InformationsquelleAutor Prashank
  3. 0

    Vous avez besoin de mélanger vertical-align à la hauteur de la ligne pour que cela se produise: DÉMO

    #container {
    background:gray;
    height:40px;
    line-height:40px;/* equal to height of container */
}

ul {
    margin:0;
    padding:0;
    list-style:none;
    vertical-align:bottom;/* fine since i'm inline-block */
    display:inline-block;
    line-height:1em;
}

ul li {
    line-height:28px;
    background:red;
    color:#fff;
    margin:0 20px 0 0;
    float:left;
}
    • Pourquoi le line-height:cadratin (1 em est requis pour l'ul?
    • Notez que par défaut la valeur pour vertical-align est la base, donc si vous l'enlevez , vos li, debout sur le milieu de 40px hauteur
    • pour réinitialiser la hauteur de la ligne à l'intérieur de li autre chose, il est 40px trop 🙂
    • j'ai juste pris que et de le tester. Fonctionne très bien.
    InformationsquelleAutor G-Cyr
  4. -1

    S'il vous plaît arrêter de perpétuer la hauteur de la ligne hack pour l'alignement vertical. Alignement Vertical ne fonctionne que quand il y a un frère ou une sœur de référence.

    Si vous avez seulement un élément que vous souhaitez alignés verticalement, vous devez d'abord l'envelopper dans un élément avec une hauteur définie (peut être %). Ensuite, vous placez la classe suivante sur l'élément conteneur.

    CSS

    .VAlignHelper:after {
    content:'';
    font-size:0;
    height:100%;
    vertical-align:middle;
    display:inline-block;
}

    HTML

    <div id="container" class="VAlignHelper">
    <ul>
        <li>Menu 1</li>
        <li>Menu 2</li>
        <li>Menu 3</li>
    </ul>
</div>

    Démo

    http://jsfiddle.net/jmdrury/YpEd7/3/

    • vertical-align + la hauteur de la ligne de texte et inline-boîtes de bien fonctionner, c'est pourquoi il faut le faire, déplacer un élément à partir de sa " ligne de base dans le texte ou dans les autres inline-boîtes.Il définit un min-height trop à l'élément si aucun jeu dans le CSS. vous pouvez jouer avec ce codepen.io/gc-nomade/pen/rmxpo pour en savoir interaction avec des éléments et des données de base/hauteur de la ligne 😉
    • Hauteur de la ligne est absolument pas conçu pour aligner des éléments. Il est conçu pour fournir la capacité de modifier l'espacement entre les lignes des éléments de la boîte comme "p". Par exemple, faire un bloc de texte à double interligne. Vous pouvez le vérifier en examinant les specs en ligne sur Mozilla ou W3.
    • C'est de quoi il s'agit, ici, de définir un inline-box en bas. ....... nous avons ici un élément et une ligne/inline-box. ..... Que vous réglez la hauteur de la ligne ou pas, de hauteur élément ne permet de l'étirer. C'est ce que votre pseudo élément est en train de faire, l'étirement de la hauteur de la ligne jusqu'à 40px, mais seulement sur la ligne où il se trouve. jsfiddle.net/YpEd7/4 ma réponse n'a pas utiliser de pseudo parce que vous avez & cause, j'ai été appelé le maître de pseudo-éléments de dans une autre question (dois-je les utiliser trop ? 🙂 ). J'ai pensé utile de rappeler comment la hauteur de la ligne des œuvres et ce qu'il implique.
    InformationsquelleAutor Justin Drury