Vertikal Aligning einige Text in einem Block Tag

Question

Ich brauche eine CSS gunu da draußen mich mit diesem zu helfen. Ich habe ein Recht einen Tag, der ein Blockelement mit fester Breite und Höhe. In ihm ist ein Hintergrundbild und die Bilder Titel. Ich versuche, den Text nach unten ausrichten und ich bin immer nicht, wo. Ich habe versucht zu tun Anzeigen: table-Zelle; vertical-align: bottom; und alle Arten von verschiedenen Möglichkeiten. Bu nirgends bekommen. Ich weiß, dass ich tun line-height könnte aber das hat diese seltsame gepunktete Linie um das Element. Gerade versucht, innerhalb der ein Tag eine Spanne mit dem Text in das aufweist und vertikal ausrichten, dass aber keine Freude, obwohl die Unterstreichungs nach unten bewegt hat. Welches ist seltsam! Jede Hilfe sehr geschätzt. Richard

Answer 1

Das übergeordnete Element muss Anzeige: Tabelle und dann das Element, das Sie auf dem Boden wollen hat display: table-cell; align: bottom;

Answer 2

Was Browser sind Targeting Sie? Dies funktioniert gut für mich in IE8.0.6 und 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>

Beachten Sie ich sowohl display:table-cell; und vertical-align:bottom; verwendet haben. Sie müssen ‚em beide; wenn Sie nicht sicher, haben versucht, das.

Wenn das Ihnen Probleme geben (zielen Sie IE6?) Sie gehen zu haben Ihr <a> Element in einem Block-Level-Elemente zu platzieren und dann positionieren.

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