Top-align text within button element?

Question

I have some buttons that have varying numbers of lines of text, all with a fixed width and height. It seems that anything I put between the <button> </button> tags are vertically aligned to the middle by default. I want to vertically align the text within the button to the top, so that the first line of each button starts at the same line.

One workaround I found was this, but as you can see in this example (http://jsfiddle.net/d27NA/1/), with this approach, I have to manually designate the top property for buttons that contain texts of different lengths, else buttons that contain longer text will overflow the top.

I'm wondering if there is an alternate approach that will solve this problem in a more elegant way. Thanks.

html:

<div>
    <button class="test">
        This text is vertically center-aligned. I want this to be top-aligned.
    </button>
</div>

css:

.test{
    font-size:12px;
    line-height:14px;
    text-align:center;
    height:100px;
    width:100px;
}

Answer 1

Yup, just define the button as position:relative; and the span as position:absolute;top:0;left:0; and you're in business.

jsFiddle updated

UPDATE

So in the three years since this answer, flexbox has become more prominent. As such, you can do this now:

.test {
    display: inline-flex; /* keep the inline nature of buttons */
    align-items: flex-start; /* this is default */
}

This should give you what you're looking for. You may need to apply appearance: none; (with appropriate browser prefixes), but that should do it.