为什么图像不在 <table><td> 中心？

Question

所以我正在使用 google 脚本构建一个 web-app，结果是一个包含多个 table 的仪表板。我也在使用 bootstrap (https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css)。多年来我一直在寻找答案，但我就是找不到我缺少的东西。

所以在 table 中，我想插入一个图像，该图像必须水平和垂直居中，位于 td 的中心，并且必须适合并适应行或 td 高度，我将选择.

但一次又一次，我的图像到达 td/row 的底部并且经常重叠并低于该行，它似乎具有正确的高度，但它从来没有正确放置自己。我复制了一小部分代码以使其更清晰：

Here the result i get

这是我的代码：

.row {}

table {
  text-align: center;
}

tr {
  line-height: 20px;
}

th,
td {
  position: relative;
  text-align: center;
  vertical-align: middle;
}

img {
  display: block;
  vertical-align: center;
  position: absolute;
  height: 20px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <base target="_top">
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <?!= include("page-css"); ?>
</head>

<body>

  <div class="container">
    <div class="row" style="width: 500px">
      <!-- TABLE TEST -->
      <div>
        <!-- Test -->
        <table class="table">
          <thead>
            <tr>
              <th>Rank</th>
              <th>Name</th>
              <th>Points</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td><img src="https://static.sky.it/images/skytg24/it/spettacolo/serie-tv/2021/02/25/spongebob-serie-tv-kamp-koral/kamp.jpg"></td>
              <td>3</td>
            </tr>
            <tr>
              <td>11</td>
              <td><img src="https://static.sky.it/images/skytg24/it/spettacolo/serie-tv/2021/02/25/spongebob-serie-tv-kamp-koral/kamp.jpg"></td>
              <td>33</td>
            </tr>
            <tr>
              <td>111</td>
              <td><img src="https://static.sky.it/images/skytg24/it/spettacolo/serie-tv/2021/02/25/spongebob-serie-tv-kamp-koral/kamp.jpg"></td>
              <td>333</td>
            </tr>
          </tbody>
        </table>
      </div>
      <!-- CLOSE TABLE TEST -->

我已经尝试了我发现的：display:block、parents 的 position:relative、儿童的 absolute 和其他几种解决方案，但似乎没有任何效果。我显然遗漏了一些东西，我可能已经把样式搞得一团糟，以至于我什至可能尝试过可能被其他错误阻止的好的解决方案。

感谢谁能提供帮助

Answer 1

您可以尝试在图像容器上使用 width: 100%;，display: flex; 使其响应并 justify-content: center; 使图像居中。

.row {
  }

  table {
    text-align: center;
  }  

  tr {
    line-height: 20px;
  }
  
  th, td {
    position:relative;
    text-align:center;
    vertical-align:middle;
  }

  img {
    display: block;
    vertical-align: center;
    position:absolute;
    height:20px;
  }
  
  .image_container {
    width: 100%;
    display: flex;
    justify-content: center;
  }

<!DOCTYPE html>
<html lang="en">
  <head>
    <base target="_top">
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <?!= include("page-css"); ?>
  </head>
  <body>
  
    <div class="container">
      <div class="row" style="width: 500px"> <!-- TABLE TEST -->
        <div > <!-- Test -->
          <table class="table">
            <thead>
              <tr>
                  <th>Rank</th>
                  <th>Name</th>
                  <th>Points</th>
              </tr>
            </thead>
            <tbody>
              <tr><td>1</td><td>
              <div class="image_container">
              <img src="https://static.sky.it/images/skytg24/it/spettacolo/serie-tv/2021/02/25/spongebob-serie-tv-kamp-koral/kamp.jpg"></div></td><td>3</td></tr>
              <tr><td>11</td><td>
              <div class="image_container">
              <img src="https://static.sky.it/images/skytg24/it/spettacolo/serie-tv/2021/02/25/spongebob-serie-tv-kamp-koral/kamp.jpg"></div></td><td>33</td></tr>
              <tr><td>111</td><td>
              <div class="image_container">
              <img src="https://static.sky.it/images/skytg24/it/spettacolo/serie-tv/2021/02/25/spongebob-serie-tv-kamp-koral/kamp.jpg"></div></td><td>333</td></tr>
            </tbody>
          </table>
        </div> <!-- CLOSE TABLE TEST -->
      </div>
    </div>
  </body>

Answer 2

我添加了一些小改动。尝试放置这部分代码而不是当前的 css:

 tr {
    line-height: 20px;
    display: flex;
    flex-direction: row;
  }
  
  th, td {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  img {
    height:20px;
  }

希望对您有所帮助！

Answer 3

table {
    text-align: center;
  }  
  
  th, td {
    position: relative;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #ccc;
    min-width: 100px;
    font-size: 50px
  }

  img {
    display: inline-block; /* display should be inline or inline-block */
    vertical-align: middle; /* vertical align should be middle */
    position: relative; /* position should be relative */
    height: 20px;
  }

<div class="row" style="width: 600px"> <!-- TABLE TEST -->
          <!-- <div> loose open tag here -->
          <table class="table">
            <thead>
              <tr>
                  <th>Rank</th>
                  <th>Name</th>
                  <th>Points</th>
              </tr>
            </thead>
            <tbody>
              <tr><td>1</td><td><img src="https://static.sky.it/images/skytg24/it/spettacolo/serie-tv/2021/02/25/spongebob-serie-tv-kamp-koral/kamp.jpg"></td><td>3</td></tr>
              <tr><td>11</td><td><img src="https://static.sky.it/images/skytg24/it/spettacolo/serie-tv/2021/02/25/spongebob-serie-tv-kamp-koral/kamp.jpg"></td><td>33</td></tr>
              <tr><td>111</td><td><img src="https://static.sky.it/images/skytg24/it/spettacolo/serie-tv/2021/02/25/spongebob-serie-tv-kamp-koral/kamp.jpg"></td><td>333</td></tr>
            </tbody>
          </table>
        </div> <!-- CLOSE TABLE TEST -->

Answer 4

如有疑问：简化

我在你的 td 周围添加了边框，这样你就可以看到效果

td {
  border: 1px solid red;
  text-align: center;
  height: 40px;
}

td>img {
  vertical-align: middle;
  max-height: 20px;
}

<div class="row" style="width: 500px">
  <!-- TABLE TEST -->
  <div>
    <!-- Test -->
    <table class="table">
      <thead>
        <tr>
          <th>Rank</th>
          <th>Name</th>
          <th>Points</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td><img src="https://static.sky.it/images/skytg24/it/spettacolo/serie-tv/2021/02/25/spongebob-serie-tv-kamp-koral/kamp.jpg"></td>
          <td>3</td>
        </tr>
        <tr>
          <td>11</td>
          <td><img src="https://static.sky.it/images/skytg24/it/spettacolo/serie-tv/2021/02/25/spongebob-serie-tv-kamp-koral/kamp.jpg"></td>
          <td>33</td>
        </tr>
        <tr>
          <td>111</td>
          <td><img src="https://static.sky.it/images/skytg24/it/spettacolo/serie-tv/2021/02/25/spongebob-serie-tv-kamp-koral/kamp.jpg"></td>
          <td>333</td>
        </tr>
      </tbody>
    </table>
  </div>
  <!-- CLOSE TABLE TEST -->

Answer 5

为了解决这个问题，您必须从 CSS 中的标签中删除 2 种样式：

显示：块
位置：绝对
。排 { } table{ text-align：居中； } tr { line-height: 20px; } th, td { position:relative; text-align：中心； vertical-align：中间； } 图片 { vertical-align：居中； height:20px; }

为什么图像不在 <table><td> 中心？

Why image doesn't center in <table><td>?

html

javascript

css

bootstrap-4