So platzieren Sie den Text am unteren Rand, wenn die Höhe vorgegeben ist!

Question

Das sollte unglaublich trivial sein, aber es ist nicht. Ich habe eine vordefinierte Höhe für einen Anker und möchte den Text unten platzieren.

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

Ich habe die folgende CSS verwendet, die nicht funktioniert. Der Text erscheint immer noch oben.

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

Die Idee ist: Ich möchte Text unten ausrichten, aber wenn es Text ist, die länger als eine Zeile ist, möchte ich die Strömung über nach oben gehen, nicht alles andere nach unten drücken .. Irgendwelche Ideen, wie dies erreicht werden könnte?

Answer 1

Dies kann nicht mit CSS und dem HTML, das Sie bereitstellen, durchgeführt werden. Wenn Sie eine zusätzliche Spanne in den Anker setzen, kann es geschehen:

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

Answer 2

Sie bottom:0px mit position:absolute in Anker verwenden können.

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; 
} 

in jsfiddle See.

Answer 3

Es würde definitiv nicht funktionieren, denn <a> Anker sind Inline-Tags, daher die Zuweisung von ihnen Höhen und Breiten ist nutzlos. Die Eigenschaft vertical-align bestimmt die Positionierung von Inline-Elementen in Bezug auf die Linie, in der sie sich befinden, nicht die vertikale Position des Texts. (Siehe http://reference.sitepoint.com/css/vertical-align) Soweit ich verstehe, was Sie anfordern, kann nicht getan werden. Es gibt jedoch Alternativen, wie oben vorgeschlagen, um ähnliche Effekte zu erzielen.

Answer 4

Das Problem mit Ihrem Code ist, dass der Anker nicht auf Höhe/Breite reagiert, da es ein Inline-Element ist. Wenn Sie dem Anker einen {display: block} hinzufügen, ist es jetzt ein Blockelement, aber, wie ich mich erinnere, vertical-align funktioniert nicht auf den Inhalt von Blockelementen. Dies war der einfachste Weg, den ich mir vorstellen konnte Display: Tisch-Zelle.

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

Answer 5

Es klingt wie Sie einfach und wie padding-top: 45px etwas auf dem