BentCoder
BentCoder

Reputation: 12750

Centering a div which contains images

I'm trying to centre images but failed to do so. I added margin: auto; to images but not working. When removing float: left; from carousel, structure gets messed up.

How can I centre the images?

Thanks

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

        <script type="text/javascript">
            $(document).ready(function ()
            {
                var showing_default = true;
                var did_scroll = false;

                $(window).on("scroll", function (e)
                {
                    did_scroll = true;
                });

                window.setInterval(function ()
                {
                    if (did_scroll)
                    {
                        did_scroll = false;

                        if (showing_default && $(document).scrollTop() >= 100)
                        {
                            showing_default = false;
                            $("#header").css('position', 'fixed');
                            $("#default").stop().hide();
                            $("#sticky").fadeIn(500);
                        }
                        else if (! showing_default && $(document).scrollTop() < 100)
                        {
                            showing_default = true;
                            $("#sticky").stop().hide();
                            $("#default").fadeIn(500);
                            $("#header").css('position', 'fixed');
                        }
                    }
                }, 250);
            });
        </script>

        <style>
            *
            {
                margin: 0px;
                padding: 0px;
            }
            #header, #default, #carousel, #body, #footer
            {
                display: block;
                width: 100%;
            }
            /* --- HEADER ------------------------------------------------------------------ */
            #header, #default, #sticky
            {
                background: #EEEEEE;
            }
            #header
            {
                position: fixed;
                z-index: 100;
                border-bottom: 1px solid #CCCCCC;
            }
            #default
            {
                height: 100px;
            }
            #sticky
            {
                display: none;
                height: 50px;
            }
            /* --- CAROUSEL ---------------------------------------------------------------- */
            #carousel
            {
                margin-top: 101px;
                float: left;
                height: 400px;
                background: #FFFFFF;
            }
            #images
            {
                position: absolute;
            }
            .image
            {
                display: none;
                position: absolute;
                width: 900px;
                height: 400px;
            }
            .image img
            {
                width: 900px;
                height: 400px;
            }
            .first
            {
                display: block;
            }
            /* --- BODY -------------------------------------------------------------------- */
            #body
            {
                background: #EEEEEE;
            }
            /* --- FOOTER ------------------------------------------------------------------ */
            #footer
            {
                background: #DDDDDD;
            }
        </style>
    </head>

    <body>
        <div id="header">
            <div id="default">DEFAULT HEADER</div>
            <div id="sticky">STICKY HEADER</div>
        </div>

        <div id="carousel">
            <div id="images">
                <div class="image first"><img src="images/1.jpg" /></div>
                <div class="image"><img src="images/2.jpg" /></div>
                <div class="image"><img src="images/3.jpg" /></div>
                <div class="image"><img src="images/4.jpg" /></div>
            </div>
        </div>

        <div id="body">TOP<br /><br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br /><br />BOTTOM</div>

        <div id="footer">FOOTER</div>
    </body>
</html>

Upvotes: 0

Views: 155

Answers (4)

cl0udw4lk3r
cl0udw4lk3r

Reputation: 2733

You have used a structure like this:

<div id="images">
    <div id="image">...</div>
    <div id="image">...</div>
    <div id="image">...</div>
    <div id="image">...</div>
</div>

so I suggest to center the divs instead, and to adapt the image on to the div width... The unique problem to my solution may are images with different sizes.

U can check my example fiddles: http://jsfiddle.net/zsfjL/11/ http://jsfiddle.net/zsfjL/10/embedded/result/

Upvotes: 1

ph33nyx
ph33nyx

Reputation: 301

There are a couple different routes you can go here, so before giving an answer I want to explain a bit... Brendan Rice is right, margin:0 auto; only works on a block level element, and an IMG is not block level by default. I must also add that the element needs a specified width of less than 100% for that to work.

The browser assigns default properties to each HTML object, that you can override with CSS. Display is a rule describes the type of flow and space this element will control (more detail here: http://css-tricks.com/almanac/properties/d/display/). A block level element (like DIV or P tags), by default, has a width of 100% of its container. This causes a line return before and after it.

When we desire to center a block level element, it is common to override the width and then set margin:0 auto; When we want to center an inline object, text-align:center; is customary.

In your case, I would start by setting position:relative; and specify a width on your div#carousel as those are indicated when using the float rule. Is the position:absolute needed on your carousel div and images div? If so, I would add display:block;margin:0 auto; to your .image img rules.

Upvotes: 0

Avin Varghese
Avin Varghese

Reputation: 4370

Add margin-left: half of total width of element (negative value) and left:50%

Css:

    #images
    {
        position: absolute;
        margin-left: -450px;
        left: 50%;
    }

Fiddle: http://jsfiddle.net/Vs65D/show

Upvotes: 0

Brendan Rice
Brendan Rice

Reputation: 54

When centering an image with the "margin: 0 auto" declaration, you'll also need the "display: block" declaration (div elements don't need this).

.photo { display: block; margin: 0 auto; }

Upvotes: 1

Related Questions