www.webdeveloper.com
Results 1 to 4 of 4

Thread: Center abs pos img inside rel pos div inside a cell

  1. #1
    Join Date
    Oct 2007
    Posts
    28

    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?

  2. #2
    Join Date
    Nov 2008
    Location
    Akron, OH
    Posts
    233
    Two sites might help you.
    http://www.brainjar.com/css/positioning/
    http://www.w3schools.com/Css/css_positioning.asp

    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."

  3. #3
    Join Date
    Oct 2007
    Posts
    28
    Quote Originally Posted by javawebdog View Post
    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?
    Something like the first picture on this page: http://css-tricks.com/absolute-posit...e-positioning/

  4. #4
    Join Date
    Jan 2008
    Posts
    66
    Quote Originally Posted by isvaljek View Post
    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.
    Need help bringing your website to life? http://www.nickelleon.com

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles