Center absolutely-positioned box?

Question

I made an simple slideshow with jquery and now i have the problem that i cannot center the div box in wich the slideshow is, the name of the is fadein:

<style>
body, html { margin:0; padding:0; width:100%; height:100%; }
.fadein { position:relative; width:auto; height:100%; }
.fadein img { position:absolute; left:0; top:0; }
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function(){
    $('.fadein img:gt(0)').hide();
    setInterval(function(){
        $('.fadein :first-child').fadeOut().next('img')
                                 .fadeIn().end()
                                 .appendTo('.fadein');
    }, 3000);
 });
</script>
</head>

<body>
<div class="fadein">
    <img src="1.png" width="auto" height="100%">
    <img src="2.png" width="auto" height="100%">
    <img src="3.png" width="auto" height="100%">
    <img src="4.png" width="auto" height="100%">
    <img src="5.png" width="auto" height="100%">
    <img src="6.png" width="auto" height="100%">
    <img src="7.png" width="auto" height="100%">
    <img src="8.png" width="auto" height="100%">
</div>
</body>

I know that the problem that i cannot simply center is that it position is relative and the position of the img absolut! Somehow somebody knows how to make it work! Thanks

Remove `width="auto"` from the `img` tags, or the images won't display in IE. The images display fine in all browsers without it, with the correct aspect ratio. — Matt Coughlin, Apr 04 '13 at 12:57

score 4 · Accepted Answer · answered Apr 04 '13 at 12:29

4

Add left:0; right:0 (this removes the default values of absolute positioned div) and then margin:0 auto to bring it to the center.

.fadein img { position:absolute; left:0; right:0; top:0; margin:0 auto}

DEMO

answered Apr 04 '13 at 12:29

Sowmya

26,684
21
96
136

+1 Nice solution! The same basic trick can be used to center an image vertically as well. This trick doesn't appear to work in older versions of IE (IE8 and earlier?), even after removing width="auto" from the image tag. It worked fine in all other browsers. – Matt Coughlin Apr 04 '13 at 14:54

score 0 · Answer 2 · answered Apr 04 '13 at 12:38

0

You can try removing the absolute positioning on the images and add text-align:center to their parent .fadein.

It is generally a good idea to keep your box models as simple as possible.

answered Apr 04 '13 at 12:38

Rodik

4,054
26
49

Is this [demo](http://jsfiddle.net/vphRH/1/) what you had in mind? From what I've seen so far, the downside of this approach is that the vertical scrollbar briefly changes between the fadeOut and the fadeIn of the next image. When running the same code standalone on a local webserver, the scrollbar briefly appears and disappears. The scrollbar issue doesn't occur when absolute positioning is used. Avoiding it with this approach would require some extra work. – Matt Coughlin Apr 04 '13 at 14:51

score 0 · Answer 3 · answered Apr 04 '13 at 12:40

0

You cannot center a block element that has no width set. Set either a pixel or percentage width on .fadein.

Width pixel width:

.fadein {
    position: relative;
    width: 500px; /* or using percentage: 50% */
    margin: 0 auto;
}

answered Apr 04 '13 at 12:40

Stian Jensen

150
2
4

Mr_Green · Answer 4 · 2013-04-04T13:30:14.657

0

Same as what @Rodik suggested, added some more points.

 .fadein {
      /* dont give height:100% here */
      text-align:center;
 }
 .fadein img {
     height: 100%;  /* don't give in html code */
 }

Give height: auto instead of height: 100% to .fadein because the images are coming out of the parent element. (or else don't mention anything, since it is default).
Remove positioning from both parent and child elements.
Keep all your css styles in an external style sheet.
Try to keep your code as simple as possible. (nice suggestion from @Rodik)

If you want to have positionings, then @Sowmya's solution will definitely work for you.

Working Fiddle

edited Apr 04 '13 at 13:30

answered Apr 04 '13 at 12:48

Mr_Green

40,727
45
159
271

This causes a momentary flash of vertical scrollbars, between the fadeOut and the fadeIn of the next image. Side note: The demo you linked to is attempting to use local image files. – Matt Coughlin Apr 04 '13 at 14:10
@MattCoughlin I can't see the momentary flash? http://jsfiddle.net/ffM6d/7/. But I will keep your suggestion in mind. :) (because I haven't tested ever). – Mr_Green Apr 04 '13 at 14:15
There was a typo in the original jQuery code (which I fixed in the question above). Try this [version of your demo](http://jsfiddle.net/ffM6d/8/), using the updated jQuery code. There are display issues, including the changing vertical scrollbar (try viewing it in a very wide browser window, [standalone](http://jsfiddle.net/ffM6d/8/show)). Also, I think the intent was to have the height of each image fill the entire page height, which is why `.fadein` may need `height:100%`. – Matt Coughlin Apr 04 '13 at 14:36

Center absolutely-positioned box?

4 Answers4