How to place text at the bottom when there's p

Question

This should be incredibly trivial, but it's not. I have a predefined height for an anchor, and I would like to place the text at the bottom.

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

I used the following CSS, which does not work. The text still appears at the top.

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

The idea is: I want to align text to the bottom, but if there is text that is longer than one line, I want the over flow to go to the top, not push everything else down... any ideas of how this could be achieved?

Answer 1

You can use bottom:0px with position:absolute in anchor.

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

See in jsfiddle.

Answer 2

It sounds like you just need to get rid of the height rule on the anchor tag and use something like padding-top: 45px on the li

Answer 3

The issue with your code is that the anchor won't respond to height/width because it is an inline element. If you you add a {display: block} to the anchor it's now a block element, but, as I recall, vertical-align doesn't work on the contents of block elements. This was the easiest way I could think of using display: table-cell.

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

Answer 4

It definitely would not work, because <a> anchors are inline tags, therefore assigning them heights and widths is useless. The vertical-align property determines the positioning of inline elements with respect to the line they're in, not the vertical position of the text. (See http://reference.sitepoint.com/css/vertical-align) As far as I understand what you are requesting cannot be done. However, there are alternatives, as suggested above, to achieve similar effects.

Answer 5

This can't be done using css and the html you provide. If you put an extra span in the anchor, it can be done:

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