ボタンをテーブルに合わせる

Question

私はこれらのボタンを自分のテーブルでさえしようとしていますが、うまくいきません。簡単にするために、スタイルはインラインであり、テーブルは静的です（実際には、このテーブルには画像が動的に取り込まれています）。

<button id="lftArrow">&laquo;</button> 
<table style="display:inline-table;border:0px;height:120px;"> 
    <tr id="pictureSetDisplay" name="pictureSetDisplay"> 
    <td>some picture</td> 
    <td>some picture</td> 
    </tr> 
</table> 
<button id="rgtArrow">&raquo;</button> 

どのようなタイプのスタイルをテーブルの垂直中央に座らせるためにボタンに適用する必要がありますか？

Answer 1

あなたがテーブル内だけでなく、ボタンを配置することができます - 外部表を。しかし、はい、もう1つのテーブルが必要になります。

チェックフィドル：必要に応じてhttp://jsfiddle.net/FYV3m/3/

<table border="1"><tr> 
    <td valign="middle"> 
    <button id="lftArrow" style="height:120px">&laquo;</button> 
    </td><td valign="middle"> 
    <table style="display:inline-table;border:0px;height:120px;"> 
     <tr id="pictureSetDisplay" name="pictureSetDisplay"> 
     <td>some picture</td> 
     <td>some picture</td> 
     </tr> 
    </table> 
    </td><td valign="middle"> 
    <button id="rgtArrow" style="height: 120px">&raquo;</button> 
    </td> 
</tr></table> 

あなたはボタン（またはCSS）からの高さのスタイルを削除することができます。以下のように、ここに示したテーブル自体に

Answer 2

あなたは余裕でそれを行うことができるかもしれない：自動

http://bluerobot.com/web/css/center1.html

Answer 3

セットvertical-align: middle、：http://jsfiddle.net/hBZDT/1/

<button id="lftArrow">&laquo;</button> 
<table style="vertical-align: middle; display:inline-table;border:solid 1px;height:120px;"> 
    <tr id="pictureSetDisplay" name="pictureSetDisplay"> 
    <td>some picture</td> 
    <td>some picture</td> 
    <td>some picture</td> 
    <td>some picture</td> 
    </tr> 
</table> 
<button id="rgtArrow">&raquo;</button> 

可能ものの、ウェブサイト上のレイアウト要素にHTMLテーブルを使用して避けてください。