title: Top-align text within button element?
body: <p>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 <code>&lt;button&gt; &lt;/button&gt;</code> 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.</p>
  
  <p>One workaround I found was <a href="https://stackoverflow.com/a/10756422">this</a>, but as you can see in this example (<a href="http://jsfiddle.net/d27NA/1/" rel="noreferrer">http://jsfiddle.net/d27NA/1/</a>), 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.</p>
  
  <p>I'm wondering if there is an alternate approach that will solve this problem in a more elegant way. Thanks.</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div&gt;
      &lt;button class="test"&gt;
          This text is vertically center-aligned. I want this to be top-aligned.
      &lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.test{
      font-size:12px;
      line-height:14px;
      text-align:center;
      height:100px;
      width:100px;
  }
  </code></pre>