在div中居中放置图像和文本

时间：2019-06-19 08:50:01

标签： html css

我希望获得有关此代码的帮助。我正在尝试将所有内容（例如图像，文本和表格）居中。当我尝试使用display：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>

7 个答案:

答案 0 :(得分：4)

我只是遍历您的代码，发现您对每个<table>使用了单独的<tr>。仅在前class="center"个使用<table>的地方。给每个<table>都加上cla​​ss =“ 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>

答案 1 :(得分：1)

如果您只想将内容居中，则此 css 可以：

.container {
  text-align: center;
}

table {
  width: 100%;
}


.container {
  text-align: center;
}

table {
  width: 100%;
}
<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>

相同的代码，但不使用<table>：

.container {
  text-align: center;
}
<div class="container">
  <div>
    <img src="https://image.flaticon.com/icons/svg/1460/1460537.svg" width="15%">
    <h3>COTON 100% BIOLOGIQUE</h3>
  </div>
  <div>
    <img src="https://image.flaticon.com/icons/svg/131/131131.svg" width="15%">
    <h3>MADE IN FRANCE</h3>
  </div>
  <div>
    <img src="https://image.flaticon.com/icons/svg/1086/1086223.svg" width="15%">
    <h3>IMPRESSION FRANCAISE</h3>
  </div>
</div>

答案 2 :(得分：0)

我建议不要将表格用于这种布局。我会用flex-box来做，看起来像这样：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

.container .section {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

h3 {
  text-transform: uppercase;
}

@media (max-width: 768px) {
  /* breakpoint */
  .container {
    flex-direction: column;
  }
}
<div class="container">
  <div class="section">
    <img src="https://image.flaticon.com/icons/svg/1460/1460537.svg" width="15%" />
    <h3>Coton 100% biologique</h3>
  </div>
  <div class="section">
    <img src="https://image.flaticon.com/icons/svg/131/131131.svg" width="15%" />
    <h3>Made in France</h3>
  </div>
  <div class="section">
    <img src="https://image.flaticon.com/icons/svg/1086/1086223.svg" width="15%" />
    <h3>Impression Francaise</h3>
  </div>
</div>

答案 3 :(得分：0)

添加此CSS，它将起作用

.section > table{width:100%;text-align:center}

答案 4 :(得分：0)

您可以使用transform属性

.center {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  text-align: center
}
<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 class="center" 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 class="center" 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>

答案 5 :(得分：0)

使用一个包含多个tbody的表，并为media query css内联显示桌面视图

.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 (min-width: 991px) {
  table tbody {
    display:table-cell;
    padding: 10px 25px;
  }
  table tbody td img {
    width:75px;
  }
}

@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>
      <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>
      <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>

答案 6 :(得分：0)

.center {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  text-align: center
}
<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>

.center {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  text-align: center
}

相关问题
最新问题