Vertical Aligner du texte dans un bloc <a> tag

Question

J'ai besoin d'un css gunu pour m'aider avec celui-ci. Droite J'ai une balise qui est un élément de bloc fixe largeur et hauteur. A l'intérieur se trouve une image de fond et le titre des images. J'essaie d'aligner le texte en bas et je ne reçois nulle part. J'ai essayé de faire affichage: table-cellule; alignement vertical: bas; et toutes sortes de façons différentes. Bu n'arrive nulle part. Je sais que je pourrais faire la ligne-taille mais qui a cette ligne pointillée bizarre autour de l'élément. Juste essayé d'avoir une envergure avec le texte en ce que dans le tag a et l'alignement vertical que, mais pas de joie, bien que le soulignement a déplacé vers le bas. Ce qui est bizarre! Toute aide très appréciée. Richard

Answer 1

L'élément parent doit afficher: table, puis l'élément que vous voulez sur le fond a display: table-cell; aligner: bas;

Answer 2

Quels navigateurs ciblez-vous? Cela fonctionne bien pour moi dans IE8.0.6 et FireFox 3.5.8:

<a style="display:block;height:200px;width:200px;background:blue;display:table-cell;vertical-align:bottom;">This is a test</a> 

Remarque J'ai utilisé à la fois display:table-cell; et vertical-align:bottom;. Vous en avez besoin tous les deux; Je ne savais pas si tu avais essayé ça.

Si cela vous cause des problèmes (ciblez IE6?), Vous devrez placer votre élément <a> dans un élément de niveau bloc, puis le positionner.

<div style="position:relative;top:0px;left:0px;height:200px;width:200px;background:yellow;"> 
    <a style="position:absolute;bottom:0px;">Your text</a> 
</div>