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


Tags: javascript,html,css

Problem :

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



Solution :

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.


    CSS Howto..

    How to make this loading animation?

    How to add part of css property value through scope in ng-style in angular

    How to remove css files?

    How does one creates inner and outer triangles on a div with pure CSS?

    How to Replace image in CSS background using jQuery?

    How to include border-radius.htc in MVC architecture to make border-radius work in IE

    How to make a background text appear under youtube video?

    How can I zoom this gallery without moving the other pictures?

    how to effect td on fixed table layout

    How to limit a table cell to one line of text using CSS?

    How to avoid double border from the multiple
  • How to create an absolutely positioned submenu which appears on css hover

    How to allow users to set up a color theme?

    How to break a word with two 50% table cells?

    How to strongly force line-height in css, with no streches?

    how to apply vertical-align: middle at div

    How to hide a part of a CSS borderline nicely

    How to Stop Overriding of Bootstrap Css Styles

    How to center align text over CSS shape?

    How to select only top-level li in recursive menu?

    How to float text on image in css3

    How do i select all nodes and apply a css style to all of them, D3

    How do I use CSS to keep multiple images relatively sized withing the same outer element?

    How can I make uneven rows for a 2-column grid with Bootstrap/css?

    how to add a home button from css in jquery mobile?

    how to change a css background onclick

    CSS styling of a line: how to get the line to move with the header above it

    How to show mixed html and css with angularJS

    CSS - how to style a footer

    How do i add and remove an active class with jQuery?