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

csshtmljavascript

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

Best Answer

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.

Related Topic