インライン要素を上下中央揃えで並べる

変換前

変換後

インライン要素をブロックレベル要素（div）で囲み、そのdivにdisplay: inline-block; vertical-align: middle;を指定する。

コード

<!-- インライン要素を上下中央揃えで並べる -->
    <style type="text/css">
      #inline-box-center > div { 
        display: inline-block; 
        vertical-align: middle;
        text-align: left;
        margin: 5px; 
        padding: 0px; 
      }
    </style>
    <div id="inline-box-center">
      <div>
        変換前<br/>
        <textarea id="input" rows="10" cols="20"></textarea>
      </div>
      <div>
        <input type="button" value="変換" onclick="convert()">
        </div>
      <div>
        変換後<br/>
        <textarea id="output" rows="10" cols="20"></textarea>
      </div>
    </div>