Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Mar 2013
    Posts
    80
    Thanks
    45
    Thanked 0 Times in 0 Posts

    Position relative absolute not working correctly

    why the image isnt at 50% of the #box?
    it seems kind a way too below

    code

    <div id="box">
    <img src="image.png">
    </div>

    #box{
    background-color:green;
    width:500px;
    height:300px;
    position:relative;
    }
    #box img{
    width:134px;height:133px;
    float:left;
    position:absolute;
    top:50%;

    }

  • #2
    Regular Coder
    Join Date
    Jul 2008
    Posts
    157
    Thanks
    9
    Thanked 13 Times in 13 Posts

    looki up position: ABSOLUTE values

    For position:absolute property (see for example http://www.yourinspirationweb.com/en...tion-property/) you use something like this
    Code:
    .box {width:300px; margin:10px; padding:10px; background:#d8d7d7; position:absolute; top:0; left:0;}
    So it is positioned relative to its positioned parent's left, top. right or bottom. You do not use FLOAT property with ABSOLUTE posiitoned elements.

  • #3
    Regular Coder
    Join Date
    Mar 2013
    Posts
    262
    Thanks
    4
    Thanked 67 Times in 67 Posts
    Quote Originally Posted by h123er2 View Post
    why the image isnt at 50% of the #box?
    it seems kind a way too below
    It's way too low because you are setting the TOP side of the image at the 50% mark. Now, you need to add a margin-top that's negative of half of the height like this:

    Since height is 133px, half that is 66.5. Take the negative of that, and add it:

    Code:
    #box img{
    width:134px;
    height:133px;
    position:absolute;
    top:50%;
    margin-top: -66.5px;   /* Added this line of code  */
    }
    My signature :)

  • Users who have thanked ttkim for this post:

    h123er2 (04-14-2013)


  •  

    Posting Permissions

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