Center abs pos img inside rel pos div inside a cell
I would like to center(hor/vert) an absolutely positioned image in a relatively positioned div inside a table cell. Got to have it that way because I use datalist on the server side and it outputs tables for client side.
Is there a clean css solution(no hacks and tricks) for this one, or is javascript/jquery the only way to go?
The key is to give the <div> inside the table cell a unique id. Then you can affect it without disturbing other elements with something like:
<style>
#[div id]{.... positioning statements ....;}
</style>
Keep in mind absolute positioning is relative to the page, whereas you seem to need relative positioning which is focused on the containing element, in this case the table cell.
Last edited by javawebdog; 01-06-2009 at 11:29 AM.
Reason: explanation expansion
javawebdog Two things to remember:
"The only place success comes before work is in the dictionary."
"It's more than just a matter of survival. It's a matter of sympathy, compassion, passion and style."
Keep in mind absolute positioning is relative to the page, whereas you seem to need relative positioning which is focused on the containing element, in this case the table cell.
But isn't absolute position of an element related to the first parent that has relative positioning?
Correct.
Are the image dimensions known? If they are, you can use these styles to vertically and horizontally center the image.
HTML Code:
img {
position: absolute;
top: 50%; margin-top: -(half the height);
left: 50%; margin-left: -(half the width);
}
If you dont know the image dimensions, or the images have varying dimensions, you can still use this principle, but you will need to bring in JavaScript to give you a height and width. Hope this helps.
Reply With Quote
Originally Posted by javawebdog
Bookmarks