CODEWITHSUNDEEP
javascripthtmlcssbootstrap-4
LeSmoox
LeSmoox

Reputation: 47

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

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

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

Upvotes: 0

Views: 1765

Answers (5)

Ora Rapoport
Ora Rapoport

Reputation: 11

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; }

Upvotes: 0

Michi 32
Michi 32

Reputation: 36

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

Upvotes: 1

fnostro
fnostro

Reputation: 4591

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

Upvotes: 0

mindthefrequency
mindthefrequency

Reputation: 546

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

Upvotes: 0

Marko Sikman
Marko Sikman

Reputation: 405

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!

Upvotes: 0

Related Questions