Comment placer du texte en bas quand il y a une hauteur prédéfinie!

Question

Cela devrait être incroyablement trivial, mais ce n'est pas le cas. J'ai une hauteur prédéfinie pour une ancre, et je voudrais placer le texte en bas.

<li><a class="my-text">My Text</a></li> 

J'ai utilisé le CSS suivant, qui ne fonctionne pas. Le texte apparaît toujours en haut.

a.my-text { 
    background-color:#cccc; 
    height:50px; 
    vertical-align:bottom; 
    width:100px; 
} 

L'idée est: Je veux aligner le texte sur le fond, mais s'il est un texte qui est plus d'une ligne, je veux que le flux de plus pour aller vers le haut, pas pousser tout le reste bas .. Des idées sur la façon dont cela pourrait être réalisé?

Answer 1

Cela ne peut pas être fait en utilisant css et le code HTML que vous fournissez. Si vous mettez une durée supplémentaire dans l'ancre, il peut être fait:

a.my-text { 
    height: 50px; 
    display: block; 
} 
a.my-text span { 
    position: absolute; 
    bottom: 0; 
} 

Answer 2

Vous pouvez utiliser bottom:0px avec position:absolute dans l'ancre.

HTML

<li><a class="my-text">My Text</a></li> 

CSS

li { 
    position: relative; 
    height:200px; 
    border: 1px solid red; 
} 

a.my-text { 
    bottom: 0px; 
    border: 1px solid blue; 
    position: absolute; 
    background-color:#cccc; 
    width:100px; 
    height:50px; 
} 

Voir en jsfiddle.

Answer 3

Cela ne fonctionnerait certainement pas, car <a> ancres sont des balises en ligne, donc leur assigner des hauteurs et des largeurs est inutile. La propriété vertical-align détermine le positionnement des éléments en ligne par rapport à la ligne dans laquelle ils se trouvent, et non la position verticale du texte. (Voir http://reference.sitepoint.com/css/vertical-align) Pour autant que je comprends ce que vous demandez ne peut être fait. Cependant, il existe des alternatives, comme suggéré ci-dessus, pour obtenir des effets similaires.

Answer 4

Le problème avec votre code est que l'ancre ne répondra pas à hauteur/largeur car il s'agit d'un élément en ligne. Si vous ajoutez {display: block} à l'ancre, c'est maintenant un élément de bloc, mais, si je me souviens bien, vertical-align ne fonctionne pas sur le contenu des éléments de bloc. C'était la façon la plus simple que je pouvais penser à utiliser display: table-cell.

a.my-text { 
    background-color: #ccc; 
    height: 200px; width: 100px; 
    vertical-align: bottom; 
    display: table-cell; 
} 

Answer 5

Il semble que vous avez juste besoin de se débarrasser de la règle de hauteur sur l'étiquette d'ancrage et utiliser quelque chose comme padding-top: 45px sur le li