CODEWITHSUNDEEP
jquerycsspositioningalignmentslideshow
thom_p
thom_p

Reputation: 219

Centering (horizontally and vertically) images within a div conflicting with jQuery slideshow

I know there are tons of posts about centering images within a div both vertically and horizontally. That's not my problem. I was able to do that.

I'm building a portfolio website for my photographer friend using (a custom Wordpress theme). You can see it here: http://alexdebrabant.com/front Some pages of his site only have one picture, in which case I'm having no problem centering the image both vertically and horizontally within the .imgcontent div (using a combination of the display:table-cell, vertical-align:middle and text-align:center) You can see successful examples here: http://www.alexdebrabant.com/blog/emilia/ (full height and properly horizontally aligned) http://www.alexdebrabant.com/blog/trusst-2/ (full width and properly vertically aligned)

However, some other pages have several pictures "wrapped" in a jQuery slideshow. On these pages, I can't seem to be able to center the images withing the div. They align to the top left. You can see an example here: http://www.alexdebrabant.com/blog/divine-2/ (aligned top left of the div)

I believe the issue is caused by the jQuery slideshow which, from what I understand, actually loads all the pictures but then hides all but one.

I was hoping someone might have a idea how to overcome this issue. Thank you!

Upvotes: 0

Views: 2103

Answers (1)

ori
ori

Reputation: 7847

The issue is caused by the slideshow plugin, which applies position: absolute; top:0; left:0 to the images, once there's more than one image. This effectively cancels the alignment definitions assigned to the parent.

Looking at the transition, the images blend into each other, so they have to be absolutely positioned (no other way to accomplish that).

I think the following would work: Change

<div class="imgcontent">
    <img.../>
    <img.../>
</div>

To:

<div class="imgcontent">
    <div class="img-slide"><div class="img-cell"><img.../></div></div>
    <div class="img-slide"><div class="img-cell"><img.../></div></div>
</div>

With CSS:

.img-slide, .img-cell {
    height: 660px;
    width: 880px;
}
.img-cell {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

Because the container (.imgcontent) dimensions are known, we apply them to the wrappers. The img-slide wrapper will become absolutely positioned by the plugin, but its content should work as it does for a single image.

Upvotes: 1

Related Questions