Search code examples
htmlcssbuttontext-align

Place text in lower right corner of a button

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

  • something like this: 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;
}

    the right alignment you found out already. For the bottom alignment I set the height of the button, text and fontsize all to the same value. I then added top padding to make the height become the desired 50px again (actual height = height+padding).