bas vertical aligner un h3 texte avec 100% de la hauteur

Pour être clair, je ne suis pas intéressé à la verticale dans l'alignement de la h3 au fond d'un div ou un autre élément de bloc. Je le savais déjà.

J'ai un h3 avec 100% de la hauteur. Je veux aligner verticalement le texte dans la h3 vers le bas.

Voici un Violon.

div {
    border: 1px solid #ccc;
    height: 200px;
    text-align: center;
    width: 150px;
}
h3 {
    height: 100%;
    vertical-align: bottom;
}

<div>
    <h3>Kitchen Experiments</h3>
</div>
InformationsquelleAutor Jumbalaya Wanton | 2013-12-20
  1. 6

    Cela pourrait faire l'affaire.

    Pour le code HTML suivant:

    <div>
    <h3>Kitchen Experiments</h3>
</div>

    appliquer le code CSS suivant:

    div {
    border: 1px solid #666;
    height: 200px;
    text-align: center;
    width: 150px;
}

h3 {
    height: inherit;
    vertical-align: bottom;
    background-color: pink; /* optional to show extent of element */
    margin: 0;
    display: table-cell;
}
h3:after { /* trick to add bottom padding */
    content: '';
    display: block;
    height: 10px; 
}

    Appliquer display: table-cell à h3 et hériter de la hauteur (au lieu de 100%).

    Le parent div est encore un élément de bloc, donc il va probablement se comporter de manière responsable (mais vous devez essayer vous-même).

    Si vous avez besoin de contrôler le bas du rembourrage entre le texte et le bloc parent,
    vous pouvez inclure la règle avec le pseudo-élément.

    Démo: http://jsfiddle.net/audetwebdesign/RJ6YM/

    InformationsquelleAutor Marc Audet
  2. 4

    Écrire:

    div {
    display:table;
}

h3 {
    vertical-align: bottom;
    display:table-cell;
}

    mise à Jour de violon ici.

    • +1 bon conseil, mais je ne peux pas faire display: table; - Il bousille mon responsive layout.
    InformationsquelleAutor Hiral
  3. 1

    Vous pouvez le faire par le positionnement absolu de votre H3 élément à l'intérieur de la div. Voici une mise à jour de violon http://jsfiddle.net/7Lcvy/2/

    • Qui ne correspond pas à mes besoins; il supprime mon height: 100% exigence de hauteur.
    • Et pourquoi est-ce une obligation?
    • Il n'a pas d'importance, mais il y a une bonne raison pour cela. C'est trop long pour un commentaire, mais ma question précise à cette exigence.
    • très bien alors, mais que diriez-encapsulant le texte à l'intérieur de votre <h3> dans une période que l'on peut positionner par rapport à la h3. Il n'y a pas de solution propre à votre problème.
    • Ce que l'enfer, je m'explique: La div entourant doit être cliquable. Il redirige vers un emplacement via JS. Mais la div a un ajax bouton qui, lorsqu'on clique dessus, devrait mener une autre demande. Malheureusement, l'événement click se propage à partir du bouton de la div, et annule la requête ajax qu'il effectue la redirection. L'appel de e.stopPropagation() sauts de l'ajax. Avoir 100% de la hauteur me permet de faire la h3 cliquable sans pour autant sacrifier le bouton de l'ajax.
    InformationsquelleAutor Caelea
  4. 0

    Pour ceux qui peuvent utiliser flexbox, voici un flex alternative:

    div {        
  display: flex;
  ...
}

h3 {
  display: flex;
  align-self: center;
  ...
}

    http://jsfiddle.net/mrchief/62a7djxh/1/

    InformationsquelleAutor Mrchief