title: How to align (multiple) tables as centered (and responsively)?
body: <p>I'm trying to align two (and later maybe more) tables horizontally.
  I am also trying to do so as part of a template I am using from a CMS.</p>
  
  <p>The aforementioned solutions at:</p>
  
  <p><a href="https://stackoverflow.com/questions/14278167/html-how-to-align-two-tables-in-one-row">HTML how to align two tables in one row?</a>
  <a href="https://stackoverflow.com/questions/11690223/html-two-tables-side-by-side">HTML -- two tables side by side</a></p>
  
  <p>did not work for me.</p>
  
  <p>Well, first of all, the "mixture" of div and table has been neglected on other posts (e.g. <a href="https://www.sitepoint.com/community/t/how-to-place-two-tables-side-by-side/6499/5" rel="nofollow noreferrer">https://www.sitepoint.com/community/t/how-to-place-two-tables-side-by-side/6499/5</a>) as bad practice.</p>
  
  <p>Moreover, when using</p>
  
  <pre><code>body {
    text-align:center;
  }
  </code></pre>
  
  <p>it de facto means, ALL text (also in paragraphs) is displayed as centered. That's not what I want.</p>
  
  <p>My code stems from a template for a CMS. Cocerning the tables, it looks like this by default:</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>I then thought, I'll another two classes:</p>
  
  <pre><code>table.beirat_l, table.beirat_r,{
  margin: 25px auto 25px auto;
  display:inline-table;
  float: left;
  }
  </code></pre>
  
  <p>My HTML looks like this:</p>
  
  <pre><code>&lt;table class="beirat_l"&gt;
  &lt;tbody&gt;
  &lt;tr&gt;
      &lt;td&gt;
      &lt;img alt="Dr. Heiko Breit" class="img-responsive" height="241" src="http://kloss.biz/media/pics/Dr.-Heiko-Breit.jpg" style="" width="254" /&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td&gt;Dr. Heiko Breit&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  
  &lt;table class="beirat_r"&gt;
  &lt;tbody&gt;
  &lt;tr&gt;
      &lt;td&gt;
      &lt;img alt="Dr. Heiko Breit" class="img-responsive" height="241" src="http://kloss.biz/media/pics/Dr.-Heiko-Breit.jpg" style="" width="254" /&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td&gt;Dr. Heiko Breit&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>But they did not work either. In fact, nothing I am trying in this CSS has an effect on my two tables.</p>
  
  <p>Also, another requirement is the tables need to be responsive, so they need to shift vertically when viewed on small screens.</p>