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.
a.my-text {
background-color:#cccc;
height:50px;
vertical-align:bottom;
width:100px;
}
5 Réponses :
Cela ne peut pas être fait en utilisant CSS et le HTML que vous fournissez. Si vous mettez une portée supplémentaire dans l'ancre, cela peut être fait:
a.my-text {
height: 50px;
display: block;
}
a.my-text span {
position: absolute;
bottom: 0;
}
Vous voulez dire position: absolu. Position: relatif; bas: 0; ne déplacera nulle part l'élément
À droite. Je suis un imbécile. Édité maintenant.
Vous pouvez utiliser html CSS voir dans Jsfiddle . bas: 0PX avec la position : absolu dans l'ancre.
Il ne fonctionnerait certainement pas, car Les ancres sont des étiquettes inline, l'affectation donc des hauteurs et des largeurs sont inutiles. La propriété vertical-align détermine le positionnement des éléments en ligne par rapport à la ligne, ce n'est pas la position verticale du texte. (Voir http://reference.sitepoint.com/css/vertical-align ) Pour autant que je comprends ce que vous demandez ne peut pas être fait. Cependant, il existe des alternatives, comme suggéré ci-dessus, pour obtenir des effets similaires.
Le problème avec votre code est que l'ancre ne répondra pas à la hauteur / largeur, car il s'agit d'un élément en ligne. Si vous ajoutez un
Scott, j'ai utilisé cette solution auparavant, mais cela a provoqué un résultat étrange pour le reste de ma CSS ... Je vais lui donner un autre essai et voyez ce qui se passe!
On dirait que vous avez juste besoin de vous débarrasser de la règle de hauteur sur la balise d'ancrage et d'utiliser quelque chose comme Padding-top: 45px sur le LI
Non, ça ne marcherait pas. Parce que si le texte d'ancrage occupe plus d'une ligne, le contenu inférieur à l'ancrage serait enfoncé au lieu du texte d'ancrage enfoncé.