使按钮在td内垂直居中

Question

这是一个例子:

  <table>
    <tr>
    <td style="background: lightgreen; vertical-align: middle">
      <button type="button">b1</button>
    </td>
    <td style="background: yellow; vertical-align: middle">
      <button type="button">b2</button>
        <textarea cols="40" rows="2"></textarea>
    </td>
    </tr>
  </table>

这里是JSFiddle链接:http://jsfiddle.net/jhqjumgL/1/

我想这是自我解释,我需要这里所有按钮垂直居中,但按钮与textarea配对由于某种原因决定在底部休息,任何想法如何解决？

Answer 1

您还需要垂直对齐textarea:

button, textarea {
    vertical-align: middle;
}

小提琴:http://jsfiddle.net/abhitalks/jhqjumgL/2/