Vertically centred images with slideshow

[RobM_01]

Hi,

I’m very new to CSS and just wanted see if someone could help me with a final problem I have please with the jCarousel that I have managed to get almost working on my test site.

Slideshow

If you follow the link you will see the slideshow working, the problem I have is the image is vertically aligned to the top and I need it to be the middle.

I think i’ve tried everything but cannot get it to move to the centre at all. I just wondered if you have any ideas what it could be that’s preventing it.

I have tried the vertical-align: middle; but it does not work

Many thanks in advance

Cheers Rob.

/*

jCarousel

*/

#wrap

{

color: #2A3D4E;

}



.jcarousel-skin-tango .jcarousel-container

{

background: #2A3D4E;

}



.jcarousel-skin-tango .jcarousel-direction-rtl

{

direction: rtl;

}



.jcarousel-skin-tango .jcarousel-container-horizontal

{

padding: 10px 30px 10px 30px;

width: 610px;

}



.jcarousel-skin-tango .jcarousel-clip

{

overflow: hidden;

}



.jcarousel-skin-tango .jcarousel-clip-horizontal

{

width: 610px;

height: 610px;

}



.jcarousel-skin-tango .jcarousel-item

{

width: 610px;

height: 610px;

}



.jcarousel-skin-tango .jcarousel-item-horizontal

{

margin-right: 60px;

margin-left: 0px;

}



.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-item-horizontal

{

margin-right: 0px;

margin-left: 60px;

}







/*

jCarousel Next Button

*/



.jcarousel-skin-tango .jcarousel-next-horizontal

{

background: url("../SiteImages/Next-Up.png") no-repeat 0px 0px;

top: 265px;

width: 32px;

height: 32px;

right: -20px;

position: absolute;

cursor: pointer;

}



.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-next-horizontal

{

background-image: url("../SiteImages/Next-Up.png");

}



.jcarousel-skin-tango .jcarousel-next-horizontal:hover

{

background: url("../SiteImages/Next-Down.png");

}



.jcarousel-skin-tango .jcarousel-next-horizontal:focus

{

background: url("../SiteImages/Next-Up.png");

}



.jcarousel-skin-tango .jcarousel-next-horizontal:active

{

background: url("../SiteImages/Next-Down.png");

}







/*

jCarousel Prev Button

*/



.jcarousel-skin-tango .jcarousel-prev-horizontal

{

background: url("../SiteImages/Prev-Up.png") no-repeat 0px 0px;

top: 265px;

width: 32px;

height: 32px;

left: -20px;

position: absolute;

cursor: pointer;

}



.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-prev-horizontal

{

background-image: url("../SiteImages/Prev-Up.png");

}



.jcarousel-skin-tango .jcarousel-prev-horizontal:hover

{

background: url("../SiteImages/Prev-Down.png");

}



.jcarousel-skin-tango .jcarousel-prev-horizontal:focus

{

background: url("../SiteImages/Prev-Up.png");

}



.jcarousel-skin-tango .jcarousel-prev-horizontal:active

{

background: url("../SiteImages/Prev-Down.png");

}

[RobM_01]

Any ideas please?

[Anonymous]

If your landscape and portrait images are always the same height, then padding the landscape ones will give you the effect you need. Otherwise, you will need to use some javascript to calculate based on maximum height what the padding on each image needs to be.

[RobM_01]

So you’re saying it can’t be done with CSS?

[RobM_01]

the images will always be 600px on the longest side.

[Anonymous]

You can do it with CSS if the height will be constant for the portrait *and* landscape images. For example, if portrait images are always 600px tall, and landscape 450px, then the difference in height is 150px and applying a padding-top of 75px to the landscape images will center them.

[RobM_01]

ok i think i get the idea, i could have a different class for landscape images maybe.

[RobM_01]

it sort of works :) but the border stays at the top… the 150px gap then the image. So in other words the top edge of the image has no border.

but it does move the image down fine.

[RobM_01]

see here http://www.rwmphotography.com/Portfolio.aspx

[RobM_01]

Thanks for all your help Ben. Nice one.

I used “margin-top: 100px;” in my CSS file and now it works fine.

Cheers Rob.

[Author]

Posts