This Question have 3 answers right now.

How to center text over an image in a table using javascript, css, and/or html?

Question!

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 over each image. The text in the labels may vary in size. Horizontal centering is not difficult, but vertical centering is.

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



Answers

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


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



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>
By : sdkpoly



Wrapping lists into columns


How to set up a CSS switcher

Autosizing textarea using Prototype

style.display not working in Firefox, Opera, Safari - IE7 OK

Setting the height of a DIV dynamically

Making an iframe take vertical space

Can I stop .NET eating IDs?

Most elegant way to force a TEXTAREA element to line-wrap, *regardless* of whitespace

Google Finance - Get Quotes search box - Column Alignment

CSS overflow table row positioning

Will .NET MVC give me the HTML/CSS/JS separation I need?


What is the best online javascript/css/html/xhtml/dom reference? [closed]

Is there a way to make text unselectable on an HTML page? [duplicate]

How to set up the browser scrollbar to scroll part of a page?

Google Maps, Z Index and Drop Down Javascript menus

How to center text over an image in a table using javascript, css, and/or html?

How to implement a web page that scales when the browser window is resized?

What are some excellent examples of user sign-up forms on the web? [closed]

Make a div fade away nicely after a given amount of time

Video about How to center text over an image in a table using javascript, css, and/or html?