Button tag and vertical alignment with dynamic content

Question

I have some buttons which contain text. I am trying to style it so that the text inside the buttons is vertically aligned to the top as if it were a div, instead of in the middle.

I have tried a few bits such as making it display: table-cell which I saw somewhere, but no joy.

The text is dynamic so it could be 1 word, or a short paragraph, so would prefer not to use line-height or similar.

CSS

button {
    width: 200px;
    height: 200px;
    padding: 10px;
    margin: 0 20px 0 0;

    background: #EBEBEB;
    color: #124191;
    font-size: 16px;
    text-align: left;
    border: none;

    display: table-cell;
    vertical-align: top;
}

Markup

<button>Text</button>

<button>Some more text that may go onto multiple lines like this...</button>

So my question: How do I vertically align text inside a button to the top?

http://jsfiddle.net/DNcR6/1/

Answer 1

Since you are working with fixed widths, just add some padding to the bottom:

 button {
  width: 200px;
  height: 200px;
  padding: 10px;
  padding-bottom: 120px;
  background: #EBEBEB;
  color: #124191;
  font-size: 16px;
  text-align: left;
  border: none;
  display: table-cell;
  vertical-align: top;
}

http://jsfiddle.net/DNcR6/2/

Answer 2

Regardless of the button's text, if you set the bottom padding to match the button height, it will shove the text as far up as possible. So padding: 10px 10px 200px 10px; would do it.

jsFiddle example