Question

I have a <table> and I wish to display an <img> over the <table> in the exact center.

How would I do that?

Answer 1

If the dimensions of the image are fixed (say, width 200 height 300), then something like this should work:

HTML:

<div id="table-and-image-container">
    <table id="the-table">...</table>
    <img src="..." id="the-image" />
</div>

CSS:

#table-and-image-container
{
    position: relative;
    display: inline-block;
}
#the-table
{
    z-index: 1;
}
#the-image
{
    left: 50%;
    margin-left: -100px; /* = 200px width of image / 2 */
    margin-top: -150px; /* = 300px height of image / 2 */
    position: absolute;
    top: 50%;
    z-index: 2;
}

The containing #table-and-image-container will be the size of the table, since position: absolute will take #the-image out of the sizing algorithm and display: inline-block will reduce the width to the width of the table instead of 100% of the container. Then you use standard top/left/margin tricks to position the image in the center, and use z-index to make sure it goes on top.