Power By 专否社区

Jquery & CSS position absolute center

Go To StackoverFlow.com

0

I've been having a little problem with my images. Its a jquery slideshow actually. The position of the images is absolute, which has made it tricky to center them...

this has worked for me

 #slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
    width:100%;
    text-align:center;
}

but with the width 100% it makes the image 100% of the div its inside. some the images are thinner than others and I just want those ones centered. With the width at 100% it stretches out the thin images.

Here is the HTML

<div class="contentImages">

<div id="slideshow">

<img src="upload/<?php echo $array['image'] ?>" height="200" class="active" />

<img src="upload/<?php echo $array['image2'] ?>" height="200" />

<img src="upload/<?php echo $array['image3'] ?>" height="200" />

</div></div>

and the Rest of the CSS

#slideshow {
    position:relative;
    height:200px;
    overflow:hidden;
    float:left;
    width:250px;
}

.contentImages{
    border:1px solid #CCC; 
    padding:10px; 
    margin:20px auto 0; 
    position:relative;
    width:750px; 
    overflow:hidden;
}

I've tried to apply the text-align to the slideshow div, but that didn't do anything and I have even tried setting the slideshow div to an absolute position and text-align center but that didn't (with or without a width of 100% or 250px;) work, it just shows maybe 10% of the image and they were not centering either.

Long story short, how do I get my images to center without stretching out the thin images?

I hope this makes sense.

Thanks.

----Added-----

I've tried going the jQuery rout by using this code

$(window).bind('load', function() {  
    var img_width = $("#slideshow img").width();
    $("#slideshow img").css("width", img_width);
    alert(img_width);
});

but the alert returns 255 for all of the images, even the thin images.

I adjusted my css too

#slideshow IMG {
    position:absolute;
    top:0;
    z-index:8;
    opacity:0.0;
    text-align:center;
}
2012-04-04 17:18
by user1274810
You say you're using jquery, so you can just calculate what the size and position of the images should be. What you want is not possible in plain CSS, if that's what you're asking - Mr Lister 2012-04-04 17:27
What is the name of the jquery plugin that you are using - Digital Brent 2012-04-04 17:41
Simple jQuery Slideshow Scrip - user1274810 2012-04-04 17:50
Do u want to see the jQuery code - user1274810 2012-04-04 17:51
I am interested to figure out how to calculate what the size and position of the image using jQuery, im confused on how to apply it to my code, any tips - user1274810 2012-04-04 17:55
edited my questio - user1274810 2012-04-04 18:01

1

Try

#slideshow img{
    ...
    left: 50%;
    margin-left: -/*half the width of the image in pixels*/; (-85px)
    ...
}
2012-04-04 17:23
by Joe
No the didnt work :( it cuts off my images, and it doesn't seem to center them, lo - user1274810 2012-04-04 17:29

0

Joe's answer is the trick, but because it don't work if you're browserscreen is smaller than the image width you should use this: http://d-graff.de/fricca/center.html

It's the trick to solve centering with absolute, it uses the technic from Joe but improved it a little bit.

Edited to answer the comment:

Use it like this:

<div id="distance"></div>
<img src="img/some-img.png" alt="some alt">

And you can find the CSS (with comments) in the broncode of the website.

2012-04-04 17:29
by Wouter J
I dont understand this solution : - user1274810 2012-04-04 17:33
This didnt work either : - user1274810 2012-04-04 17:50
Ads