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

so i am building a web-app with google script and the result is a dashboard with several tables. I am also using bootstrap (https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css). I've been looking for an answer for long days but i just can't find out what i am missing.

So in a table, i want to insert an image that has to be centered horizontally and vertically, in the center of the td and has to fit and adapt to the row or td height i'll choose.

But again and again, my image goes to the bottom of the td/row and often overlaps and below the row, it seems to have the right height, but it never places itself correctly. I have made a copy of little portion of my code to make it clearer:

Here the result i get

And here is my code:

.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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <?!= include("page-css"); ?>
</head>

<body>

  <div >
    <div  style="width: 500px">
      <!-- TABLE TEST -->
      <div>
        <!-- Test -->
        <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 -->

I have tried what i found around: display:block, position:relative for parents, absolute for childs, and several other solutions, but nothing seems to work. I am clearly missing something and i probably have messed with the styles so much that i even might have tried the good solution which might have been blocked by other mistakes.

Thanks to who might help

CodePudding user response：

You could try using width: 100%; on the image container, display: flex; to make it responsive and justify-content: center; to center the image.

.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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <?!= include("page-css"); ?>
  </head>
  <body>
  
    <div >
      <div  style="width: 500px"> <!-- TABLE TEST -->
        <div > <!-- Test -->
          <table >
            <thead>
              <tr>
                  <th>Rank</th>
                  <th>Name</th>
                  <th>Points</th>
              </tr>
            </thead>
            <tbody>
              <tr><td>1</td><td>
              <div >
              <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 >
              <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 >
              <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>

CodePudding user response：

When in doubt: simplify

I've added a border around your td's so you can see the effects

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

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

<div  style="width: 500px">
  <!-- TABLE TEST -->
  <div>
    <!-- Test -->
    <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 -->

CodePudding user response：

I have added some small changes. Try this part of the code to place instead of your current 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;
  }

Hope it helps!

CodePudding user response：

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  style="width: 600px"> <!-- TABLE TEST -->
          <!-- <div> loose open tag here -->
          <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 -->

CodePudding user response：

In order to fix this, you have to remove 2 styles from tag in your CSS:

Display:block
Position:absolute
.row { } table { text-align: center; } tr { line-height: 20px; } th, td { position:relative; text-align:center; vertical-align:middle; } img { vertical-align: center; height:20px; }