html - Place text in lower right corner of a button

Question

I've been searching for the answer on how to do this for awhile now. Basically is what I want is to place text in the lower right corner of a button. This is what I have so far. I have the text aligned to the right, but it is still in the middle of the button. How can I align it with the bottom as well?

.button{
  height: 50px;
  width: 50px;
  text-align: right;
}

Answer 1

像这样的东西：http: //jsfiddle.net/QavgZ/

html:

<a class="button">text</a>

CSS：

.button{
  height: 14px;
  width: 50px;
  text-align: right;
  display: block;
  border: 1px solid red;
  font-size: 14px;
  line-height: 14px;
  padding-top: 36px;
}

您已经找到了正确的对齐方式。对于底部对齐，我将按钮、文本和字体大小的高度都设置为相同的值。然后我添加了顶部填充以使高度再次变为所需的 50 像素（实际高度 = 高度+填充）。