Results 1 to 4 of 4

Thread: Center a div with a large image than the browser is

  1. #1
    Join Date
    Feb 2012

    Center a div with a large image than the browser is

    Hi all,

    I'm quite stuck on this right now, i've tried multiple things but that doesn't work.

    Here's the idea:

    I have a div that needs to be centered horizontally on a page. The content in this div is an image that is larger than the page itself. It isn't a background image as it's actually a banner that fades in and out.
    However, this image needs to be centered in the browser. So that the exact middle of the image, is in the middle of the browser.

    I've tried to put an "margin: 0 auto" on the div surrounding it, but that doesn't work.

    Does anybody have an idea?

    Thanks in advance!

  2. #2
    Join Date
    Dec 2011
    give div style margin auto; If image will be large from the div resize image or set height and width in the image tag according to the main div

  3. #3
    Join Date
    Feb 2012
    That's doesn't do the trick.. unfortunately.

    Please see this link: http://www.beautybranding.nl/Klanten/LaStrada/

    The meaning is that the fading banner should be centered in the middle of the browser. Regardless of it's width.
    Is that possible?

  4. #4
    Join Date
    Aug 2010
    San Diego
    Just a guess:

    Try giving the banner div the style { margin:0 auto; } and wrapping it in another div with the style { overflow-x:hidden; }.

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