如何在表格下方居中对齐按钮？答案

【问题标题】：How to align button centered below table?如何在表格下方居中对齐按钮？
【发布时间】：2010-11-05 10:14:38
【问题描述】：

我将表单元素放在一个表格中，以便列名和输入与 2 列对齐。我把提交按钮和取消按钮放在桌子下面。表格宽度不固定。我想将按钮与表格宽度居中对齐。

一种简单的方法是将按钮放在表格中。但我想把它们从桌子上分开。最优雅的方法是什么？

【问题讨论】：

【解决方案1】：

结构如下：

<div>
<!-- Your table -->
<table />
<!-- Your buttons -->
<div style="text-align:center;">
<input />
</div>
</div>

【讨论】：

那行不通：DIV 跨越了可用的最大宽度，而表格则没有。
哦，好吧 - 直接说 => “绝对好和错误的陈述”:) - 使用您选择的 html 编辑器轻松测试 --- 只需扩展我提供的 sn-p 几个可视化对象边界的属性----<div>  <table width="100px;" border="1 1 1 1 solid green"> <tr><td>bla</td></tr> </table>  <div style="text-align:center;border-width: 1px; border-color:red; border-style:solid;"> <input type="submit" /><input type="submit" /><input type="submit" /> </div> </div> 简短的回答：表的末尾是换行符

【解决方案2】：

由于按钮和表格是相关的，您可以使用字段集：

<fieldset>
<!-- Your table -->
<table />
<!-- Your buttons -->
<p style="text-align:center;">
<input />
</p>
</fieldset>

【讨论】：