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)
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
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
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
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