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 to the CF scene
    Join Date
    Aug 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How do you center an image when using absolute positioning in CSS?

    I'm working on a site and I can't figure out how to tell the banner to be centered
    without manually positioning in with CSS. is this even possible? and if not are there any other ways of doing this anyone knows of?

    also if it helps, the problem only occurs i think when the screen reslution is greater then 1000 pixels because thats what my positining is base on

    here is the CSS code i'm using to position it

    img.banner
    {
    position:absolute;
    top:25px;
    right:50px;
    z-index:0;
    }

    and heres a link to the site

    http://www.229inc.net/thedeathroses

    any help would be great
    Thanks
    Last edited by soxnutt04; 10-22-2007 at 01:43 AM.

  • #2
    Regular Coder medigerati's Avatar
    Join Date
    Jul 2005
    Location
    San Antonio, Tx
    Posts
    163
    Thanks
    0
    Thanked 7 Times in 7 Posts
    I'm pretty certain you can't center an absolutely positioned element without css.

    But looking at your code, you have a 'div' around your image. Why not absolutely position the div and 'text-align' center the image. The css for that would be:

    Code:
    <div class="banner"><img ..." /></div>
    Code:
    div.banner {
    position:absolute;
    text-align:center;
    top:25px;
    width:100%;
    }
    Notice that I removed all CSS from the img declaration. Make sure the img is not absolutely positioned.

    Hope that helps!
    Last edited by medigerati; 10-22-2007 at 03:01 AM.
    If you need a little more help, I'm available as a Website designer in San Antonio
    ----------
    If I've helped, please check out my friend's nature photography and let me know if you like anything.

  • #3
    New Coder
    Join Date
    Oct 2007
    Posts
    49
    Thanks
    5
    Thanked 9 Times in 9 Posts
    Another option for you.

    Code:
    div.banner {
    background-image:URL('./banner.jpg');
    background-position:top center;
    height:257px;
    width:900px;
    top:25px;
    width:100%;
    }


  •  

    Posting Permissions

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