javascript - 使用 css 将按钮与表格对齐

Question

我试图让这些按钮与我的 table 齐平，但效果不是很好，它们只是位于底部。为简单起见，样式是内联的，表格是静态的(实际上，该表格是用图像动态填充的)。

<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

您也可以将按钮放置在表内 - 外部表。但是，是的，这将涉及多一张 table 。

检查 fiddle :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)中删除高度样式。