HTML居中对齐Div中的表格与下面的按钮列表答案

【问题标题】：HTML centre align Tables in Div with button list belowHTML居中对齐Div中的表格与下面的按钮列表
【发布时间】：2016-04-22 15:28:23
【问题描述】：

我想在 div 中间的顶部将多个彼此相邻的表格居中对齐。在这些表格下方，我希望有一个垂直按钮列表左对齐。我尝试了许多不同的技术，但似乎都没有奏效。请问有人可以帮忙吗？

当前小提琴示例：

https://jsfiddle.net/Jaron787/gg30jgh5/

CSS

.TSS {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 10.6px;
  font-style: normal;
  text-decoration: none;
  float: left;
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  border: 1px solid black;
}

.button {
  background-color: #4CAF50;
  /* Green */
  border: none;
  color: white;
  padding: 5px 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  -webkit-transition-duration: 0.4s;
  /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
}

.button1 {
  background-color: white;
  color: black;
  border: 2px solid #4CAF50;
}

.button1:hover {
  background-color: #4CAF50;
  color: white;
}

HTML

<div id="lse" class="display">
  <table id="tblData" class="TSS">
    <tr>
      <td align="center" colspan="4"><b>Table 1</b></td>
    </tr>
  </table>

  <table id="tblData" class="TSS">
    <tr>
      <td align="center" colspan="4"><b>Table 2</b></td>
    </tr>
  </table>

  <input type="submit" class="button button1" name="submitButton" value="Button 1">
  <input type="submit" class="button button1" name="submitButton" value="Button 2">
  <input type="submit" class="button button1" name="submitButton" value="Button 3">
  <input type="submit" class="button button1" name="submitButton" value="Button 4">

</div>

【问题讨论】：

标签： html css

【解决方案1】：

可能只是在表格周围创建一个包装器。

<div id="centertbl">
<table id="tblData" class="TSS">
  <tr>
    <td align="center" colspan="4"><b>Table 1</b></td>
  </tr>
</table>

<table id="tblData" class="TSS">
  <tr>
    <td align="center" colspan="4"><b>Table 2</b></td>
  </tr>
</table>

然后将 text-align 应用到中心。

#centertbl { text-align: center;}

这将使表格居中。从类 .TSS 中删除了 margin: 0 auto;。

将按钮 css 代码从 display: inline-block; 更改为 display: block;

jsFiddle : https://jsfiddle.net/gg30jgh5/6/

【讨论】：

效果很好，谢谢！

【解决方案2】：

我认为你需要这种类型的 css：

please check updeted fiddle link:

some changes in your html structure.table is one div and button is another sepreate div.

https://jsfiddle.net/gg30jgh5/9/

【讨论】：

谢谢，但我希望桌子在顶部的中间并排。然后在垂直按钮列表下方。更新了不清楚的问题！
非常感谢！我只需要左下方垂直对齐的按钮
效果很好，谢谢！
还有一件事：查看jsfiddle.net/Jaron787/gg30jgh5/10 理想情况下，如果下面有不同数量的，我希望表 2 从表 1 的顶部开始。这可能吗？

【解决方案3】：

在一个 div 中设置两个表格并为此 div 设置 margin-left:50% 设置一个 div 内的所有按钮并设置 clear:both 为这个 div。

【讨论】：