How To Center Text Over An Image In A Table Using Javascript, Css, And/or Html?

August 30, 2022 Post a Comment

How to center text over an image in a table cell using javascript, css, and/or html? I have an HTML table containing images - all the same size - and I want to center a text label

Solution 1:

you could try putting the images in the background.

<table>
    <tr>
        <td style="background: url(myImg.jpg) no-repeat; vertical-align: middle; text-align: center">
            Here is my text
        </td>
    </tr>
</table>

You'll just need to set the height and width on the cell and that should be it.

Solution 2:

There's no proper way of doing it in CSS (although there should be). But here's a method that works for me.

CSS:

#image1, #image1-text, #image1-container {
  overflow: hidden;
  height: 100px;
  width: 100px;
}

#image1 {
  top: -100px;
  position: relative;
  z-index: -1;
}

#image1-text {
  text-align: center;
  vertical-align: middle;
  display: table-cell;
}

HTML:

  <div id="image1-container">
    <img src="image.jpeg" id="image1">
    <div id="image1-text">
      hello
    </div>
  </div>

The order of image1 and image1-text in the container doesn't matter.

It's a bit of a hack but it works anywhere, not just in a table. It doesn't properly work in IE however. It will display it at the top instead. But it works in FF, Safari and Chrome. Haven't tested in IE8.

A hack for IE7 or less, which will only show 1 line, but it will be centred is to add the following inside the <head> tag:

<!--[if lte IE 7]>
<style>
  #image1-text {
    line-height: 100px;
  }
</style>
<![endif]-->

Solution 3:

I would set the images as the cells' background via CSS, set the cells' size to the proper fixed value (again via CSS), and then insert the text label as the cell content. By default, the content of table cells is centered vertically, so I think you don't have to worry about it. Again, vertical and horizontal alignment can be easily set via CSS. This approach works because I applied it a lot of times.

Another way would be to insert both the image and text in the table cells, wrapping the text in a DIV element and playing with its CSS properties (relative position and margins), but this is a bit tricky in my opinion.

Solution 4:

You can use TD's option "valign" and it can be top, bottom or center... But as far as I know cell contents are centered vertically by default, so probably your CSS makes them show with bottom or top option.

<TABLE><TR valign=center>
  <TD align=center background="some image"> image label </TD>
</TR></TABLE>

Solution 5:

thanks everyone for the suggestions.

i did end up having to use javascript to center the text reliably using a fixed-size div with absolute positioning; i just could not get it to work any other way.

i also had to generate the text divs with visibility hidden and have a javascript loop at the end of the page to make them visible and place them over the appropriate table cell

there are some serious holes in the layout capabilities of css/html, hopefully these will be addressed in future versions ;-)

Html5 Developer