Jak umieścić tekst na dole, gdy jest zdefiniowana wysokość!

Question

To powinno być niewiarygodnie banalne, ale tak nie jest. Mam wstępnie zdefiniowaną wysokość dla kotwicy i chciałbym umieścić tekst na dole.

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

Użyłem następującego kodu CSS, który nie działa. Tekst nadal pojawia się u góry.

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

Chodzi o to: Chcę, aby wyrównać tekst do dołu, ale jeśli nie ma tekstu, który jest dłuższy niż jeden wiersz, chcę przepływ nad iść do góry, nie naciskać wszystko inne w dół .. wszelkie pomysły na to, jak można to osiągnąć?

Answer 1

Nie można tego zrobić za pomocą css i podanego przez Ciebie html. Jeśli umieścisz dodatkowy przedział na kotwicy, można to zrobić:

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

Answer 2

Można użyć bottom:0px z position:absolute w kotwicy.

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

Zobacz w jsfiddle.

Answer 3

Z pewnością nie zadziałałoby, ponieważ kotwice są wbudowanymi znacznikami, dlatego przypisanie ich wysokości i szerokości jest bezużyteczne. Właściwość vertical-align określa pozycjonowanie elementów śródliniowych względem linii, w której się znajdują, a nie pionową pozycję tekstu. (Patrz http://reference.sitepoint.com/css/vertical-align) O ile rozumiem, o co prosisz, nie można tego zrobić. Istnieją jednak alternatywy, jak zasugerowano powyżej, aby osiągnąć podobne efekty.

Answer 4

Problem z kodem polega na tym, że kotwica nie reaguje na wysokość/szerokość, ponieważ jest elementem śródliniowym. Jeśli dodasz do kotwicy {display: block} {display: block}, jest to teraz element blokowy, ale, jak pamiętam, wyrównanie w pionie nie działa na zawartość elementów bloków. To był najprostszy sposób, jaki mogłem wymyślić przy użyciu wyświetlacza : table-cell.

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

Answer 5

Brzmi to wystarczy, aby pozbyć się z reguły na wysokości znacznika zakotwiczenia i użyć czegoś podobnego padding-top: 45px na li