html - 在 div 中居中图像和文本

Question

我需要一些关于这段代码的帮助。我正在尝试将所有内容(即图像、文本和表格)居中。当我尝试将图像与显示居中时: block 和 margin-left, margin-right: auto 。图像完全正确，我不知道为什么。

.container {
  display: flex;
  margin: 0 auto;
}

.section {
  flex: 1;
  /*grow*/
}

table.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 768px) {
  /*breakpoint*/
  .container {
    flex-direction: column;
  }
}

<div class="container">
  <div class="section">
    <table class="center" cellspacing="0" cellpadding="0" border="0">
      <tbody>
        <tr>
          <td><img src="https://image.flaticon.com/icons/svg/1460/1460537.svg" width="15%"></td>
        </tr>
        <tr>
          <td>
            <h3>COTON 100% BIOLOGIQUE</h3>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="section">
    <table cellspacing="0" cellpadding="0" border="0">
      <tbody>
        <tr>
          <td><img src="https://image.flaticon.com/icons/svg/131/131131.svg" width="15%"></td>
        </tr>
        <tr>
          <td>
            <h3>MADE IN FRANCE</h3>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="section">
    <table cellspacing="0" cellpadding="0" border="0">
      <tbody>
        <tr>
          <td><img src="https://image.flaticon.com/icons/svg/1086/1086223.svg" width="15%"></td>
        </tr>
        <tr>
          <td>
            <h3>IMPRESSION FRANCAISE</h3>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Answer 1

我刚刚查看了您的代码，发现您正在使用单独的 <table>对于每个 <tr> .您只在何处使用 class="center"仅第一个 <table> .给每个 <table> 赋予 class="center"(如果你真的需要，在这种情况下不需要)。这是简化的代码。

.container {
  display: flex;
  margin: 0 auto;
}

.section {
  flex: 1;
  /*grow*/
}

table.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 768px) {
  /*breakpoint*/
  .container {
    flex-direction: column;
  }
}

<div class="container">
  <div class="section">
    <table class="center" cellspacing="0" cellpadding="0" border="0">
      <tbody>
        <tr>
          <td><img src="https://image.flaticon.com/icons/svg/1460/1460537.svg" width="15%"></td>
        </tr>
        <tr>
          <td>
            <h3>COTON 100% BIOLOGIQUE</h3>
          </td>
        </tr>
        <tr>
          <td><img src="https://image.flaticon.com/icons/svg/131/131131.svg" width="15%"></td>
        </tr>
        <tr>
          <td>
            <h3>MADE IN FRANCE</h3>
          </td>
        </tr>
        <tr>
          <td><img src="https://image.flaticon.com/icons/svg/1086/1086223.svg" width="15%"></td>
        </tr>
        <tr>
          <td>
            <h3>IMPRESSION FRANCAISE</h3>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>