What could be causing the image not to be centered inside the <table><td>?

Currently, I am developing a web application with Google Script that generates a dashboard featuring multiple tables. To design the layout, I am utilizing Bootstrap (https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css). Despite my extensive search efforts, I have been unable to pinpoint the missing element in my code.

Specifically, within one of the tables, I am trying to insert an image that should be horizontally and vertically centered in the middle of the td cell. Moreover, it must adapt to the height of the row or td that I choose.

Unfortunately, my image consistently ends up at the bottom of the td/row, often overlapping and extending beyond the row. Although the image appears to have the correct height, its positioning is incorrect. To clarify, I have included a snippet of my code:

Here is the output I am currently getting

Below is the relevant section of 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">
  <meta charset="utf-8>
  <meta name="viewport" content="width=device-width, initial-scale=1>
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fb9994948f888f899a8bbbced5cad5c8">[email protected]</a>/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>
        <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 experimented with various solutions I discovered, including display: block, position: relative for parents, position: absolute for children, and several other techniques. However, none of these approaches have yielded the desired results. It is evident that I am overlooking a crucial detail, and my numerous styling modifications may be obscuring the correct solution. Any assistance in resolving this issue would be greatly appreciated.

Thank you to anyone who can provide guidance.

javascripthtmlcssbootstrap-4

Answer №1

To make the image container responsive, you can use the following CSS properties: width: 100%; for the image container, display: flex; to enable responsiveness, 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>

Answer №2

When in uncertainty: simplify

I have enclosed your td's with a border so you can observe the impact

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 EXPERIMENT -->
  <div>
    <!-- Experiment -->
    <table class="table">
      <thead>
        <tr>
          <th>Position</th>
          <th>Title</th>
          <th>Scores</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>
  <!-- END TABLE EXPERIMENT -->

Answer №3

Here are some minor adjustments I made. Feel free to use this snippet 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;
  }

Hopefully this will solve your issue!

Answer №4

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 property should be inline or inline-block */
    vertical-align: middle; /* should be aligned to middle */
    position: relative; /* position should be set to relative */
    height: 20px;
  }
<div class="row" style="width: 600px"> <!-- TEST TABLE -->
          <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> <!-- END TEST TABLE -->

Answer №5

To resolve this issue, you will need to eliminate two styles from the <tag> in your CSS:

  • Remove the style Display:block

  • Get rid of 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; }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Customize your webpage's style to reflect your unique identity with user

Is there a way to allow users to customize the style of a webpage? I know I need multiple CSS files, but how can I implement the code that enables this customization based on user preferences? ...

phpjavascriptcssajax

Analyzing conditional statements in React with State management

I've been encountering challenges with if statements correctly evaluating, displaying either true all the time or exhibiting unexpected behavior when passing variables or using state variables for evaluation. I realize this might be related to differe ...

javascriptreactjs

What is the best way to implement the settimeout method in react?

I need assistance on how to effectively utilize the setTimeout() method in my code. Specifically, I am looking to trigger a click event on an element after a certain delay and execute a function afterwards. Here is the current implementation of my code: ...

javascriptreactjs

Leveraging AngularJS for a Windows store app

After attempting to integrate AngularJS into my Windows store application, I came across a few recommended solutions: Unfortunately, these solutions did not work as expected. While I didn't encounter the Unable to add dynamic content error, AngularJS ...

javascriptangularjswindows-phone-8

Show a mpld3 graph in an HTML page using the Django framework

Incorporating mpld3 to showcase matplotlib charts within an HTML page through django has been my recent focus. I utilize the mpld3.fig_to_dict method to convert a matplotlib figure into a JSON string and store it in a variable. However, I am encountering ...

javascriptpythonjsondjangomatplotlib

The scroll event listener activates based on the distance I have scrolled

const processChatRead = useCallback(() => { const chatWindow = refEntries.current; if ( chatWindow.scrollTop > chatWindow.scrollHeight - 800 && activeRoom && conversations?.content?.length > 0 && ...

javascriptreactjsscroll

Why is the jQuery Ajax AutoComplete feature not functioning properly?

Hey there, I'm currently utilizing CodeIgniter along with Ajax AutoComplete for jQuery in my project. When setting up my autocomplete feature in jQuery, I used the following code: a = $('.city').autocomplete({ serviceUrl: "<? echo $ ...

javascriptjqueryajaxjquery-autocomplete

When working with a destination module, what is the best method for storing the value that is returned from an

I have a simple function that exports data passed into a function expression. In a separate node module, I am utilizing this imported function by passing in parameters. The function is being called within a router.post method as shown below: Below is the ...

javascriptnode.js

What is the best way to retrieve data from Firebase and then navigate to a different page?

I am facing an issue with my app where I have a function that retrieves data from Firebase. However, after the completion of this Firebase function, I need to redirect it to another page. The problem is that when I press the button, the redirection happe ...

javascriptjqueryfirebase

Guide on accessing the text content within a div element in HTML by triggering a button click

To extract specific text from multiple div tags, I need to trigger an event when clicking a button. <div class="col-lg-3 col-md-6 mb-4"> <div class="pricing-table pricing-secondary"> <div class="price-hea ...

javascripthtmljquery

Mastering TypeScript in Router Configuration

I am currently working with a standard router setup. type Routes = '/' | '/achievements' | ... ; This helps in identifying the routers present in the project. However, I am faced with a new challenge of creating an array that includes ...

javascripttypescript

multiple divisions in the center

I am struggling with centering 2 divs, each containing 3 nested divs wrapped around a big main div. The code I have written is as follows: <div stye="margin-left:auto; margin-right:auto; width: 1210px;"> <div id="left" style=" float:left; width ...

csshtml

What criteria does Angular use to determine when the aot compiler should be utilized?

This page discusses the concept of modules in Angular and explains the two approaches to bootstrapping - dynamic and static. The configuration for these approaches is typically found in main.ts: // Using the browser platform with a compiler import { platf ...

javascriptangular

Retrieve information from subcategories in the Realtime Database using Firebase

Trying to access message inputs from ALL users has been a challenge. While it can be done for a specific user, the goal is to do so for all users by specifying in the code. Each UID is unique, adding complexity to the process. The Realtime Database struct ...

javascriptfirebasefirebase-realtime-database

Using knockout to data bind a function to an onclick event that takes in multiple parameters

I've scoured the internet and experimented with various methods, but I'm encountering an issue where the click function intermittently fails to fire. Below is my HTML code snippet: <input type="radio" data-bind="checked:a, checkedValue: 0 ...

javascriptjqueryknockout.js

Adding Components Dynamically to Angular Parent Dashboard: A Step-by-Step Guide

I have a dynamic dashboard of cards that I created using the ng generate @angular/material:material-dashboard command. The cards in the dashboard are structured like this: <div class="grid-container"> <h1 class="mat-h1">Dashboard</h1> ...

htmlangulartypescript

It appears that Internet Explorer is still animating/processing my loading.gif despite being set to display:none

It seems that the issue I'm encountering is related to the inconsistent starting position of the loading.gif animation when performing an ajax request. In Internet Explorer, the animation appears to start from a random point, while in Firefox it alway ...

htmlcss

What is the process for implementing JavaScript in Django?

I'm a newcomer to this and although I've tried searching on Google, I haven't found a solution. I'm facing an issue where I can include JavaScript within the HTML file, but it doesn't work when I try to separate it into its own fil ...

javascriptpythonhtmldjango

Tips for effectively utilizing an if/else structure to animate fresh content from the right while smoothly removing old content by sliding it to the left

document.getElementById("button1").addEventListener("click", mouseOver1); function mouseOver1(){ document.getElementById("button1").style.color = "red"; } document.getElementById("button2").addEventListener("click", mouseOver); function mous ...

javascriptjqueryhtmlcss

Troubleshooting a Vue 2 component's prop receiving an incorrect value

I'm currently working on creating a menu that navigates between categories. When a category has a sub-category, it should return a boolean value indicating whether it has a sub-category or not. <template> <select><slot></slot ...

javascriptvue.jsvuejs2vue-component