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

Posted 2023-03-05

【中文标题】如何在表格下方居中对齐按钮？

【英文标题】：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> <!-- Your table --> <table width="100px;" border="1 1 1 1 solid green"> <tr><td>bla</td></tr> </table> <!-- Your buttons --> <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>