Html 如何将（多个）表格居中对齐（并响应）？

我正在尝试水平对齐两个（以后可能会更多）表。 我也试图这样做，作为模板的一部分，我从CMS使用

上述解决方案包括：

不适合我

首先，div和table的“混合”在其他职位上被忽略了（例如），这是一种坏习惯

而且在使用

body {
  text-align:center;
}

它实际上意味着，所有文本（也在段落中）都显示为居中。那不是我想要的

我的代码源于CMS的模板。将这些表合并在一起，默认情况下如下所示：

table {
    border-collapse:collapse;
}

table.table {
    clear:both;
    border-collapse:collapse;
    border-top: 1px solid #666;
    margin: 20px 0 5px 0;
    width:100%;*/
    font: 0.85em;
}

然后我想，我将再上两门课：

table.beirat_l, table.beirat_r,{
margin: 25px auto 25px auto;
display:inline-table;
float: left;
}

我的HTML如下所示：

<table class="beirat_l">
<tbody>
<tr>
    <td>
    <img alt="Dr. Heiko Breit" class="img-responsive" height="241" src="http://kloss.biz/media/pics/Dr.-Heiko-Breit.jpg" style="" width="254" /></td>
</tr>
<tr>
    <td>Dr. Heiko Breit</td>
</tr>
</tbody>
</table>

<table class="beirat_r">
<tbody>
<tr>
    <td>
    <img alt="Dr. Heiko Breit" class="img-responsive" height="241" src="http://kloss.biz/media/pics/Dr.-Heiko-Breit.jpg" style="" width="254" /></td>
</tr>
<tr>
    <td>Dr. Heiko Breit</td>
</tr>
</tbody>
</table>

海科·布雷特博士
海科·布雷特博士

但它们也不起作用。事实上，我在CSS中尝试的任何东西都不会对我的两个表产生影响

---

另外，另一个要求是表格需要响应，因此在小屏幕上查看时，表格需要垂直移动。

将表格放在容器中，并将容器两侧对齐

<div class="container">
  <table class="beirat_l">
    <tbody>
      <tr>
        <td>
           <img alt="Dr. Heiko Breit" class="img-responsive" height="241" src="http://kloss.biz/media/pics/Dr.-Heiko-Breit.jpg" style="" width="254" />
        </td>
      </tr>
      <tr>
        <td>Dr. Heiko Breit</td>
      </tr>
    </tbody>
  </table>
</div>
<div class="container">
 <table class="beirat_r">
   <tbody>
     <tr>
       <td>
          <img alt="Dr. Heiko Breit" class="img-responsive" height="241" src="http://kloss.biz/media/pics/Dr.-Heiko-Breit.jpg" style="" width="254" />
       </td>
     </tr>
     <tr>
        <td>Dr. Heiko Breit</td>
     </tr>
   </tbody>
 </table>
</div>

.flex容器{
显示器：flex
}

海科·布雷特博士
海科·布雷特博士

Hmmm，很多。但正如我在问题中所说，混合div和table被认为不是一个好的方法。。。但你的意思是。。。所以，我不确定我是否会遵循这一点……而且：这并不能解决我的问题。这些表仍然垂直对齐显示。

.container{
  float: left;
  width: 50%;
}