CODEWITHSUNDEEP
cssimagecenter
user1421414
user1421414

Reputation: 1

unable to center images (css)

.photospace .slideshow-container {
    position: relative;
    clear: both;
    height: 450px;

i have a slideshow with various image sizes but non bigger than 530 by 549. for images that are smaller, how do i enter them? pictures of what i want to do. i can add margin/padding but it forces images that are already 530x549 below the screen.

my website

Upvotes: 0

Views: 458

Answers (3)

sandeep
sandeep

Reputation: 92793

Give line-height same as the height of the DIV. Write like this:

    .photospace .slideshow a.advance-link {
        line-height: 549px;
        width: 530px;
    }
.photospace .slideshow img{
 vertical-align:middle;
}

Upvotes: 2

N1ck
N1ck

Reputation: 2001

You can use display:table-cell and then vertical-align:middle.

I can see you are currently giving .gal_content display:block with jQuery, so you will need to change this to table-cell

.photospace .gal_content{
    display:table-cell;
    vertical-align:middle;
    float: right;
    width: 530px;
    height: 549px;
}

Upvotes: 1

Michael Raffaele
Michael Raffaele

Reputation: 132

If you mean you wish to vertically align it to the center, this is not possible (in all browsers at least) purely with DIVS and CSS. You will need to use Javascript to position it correctly.

Alternatively if you aren't phased about older browsers have a look at the new Webkit CSS3 property called Flexbox.

Here is an example with an image thrown in an 800x800px box and auto aligned using Flexbox: http://jsfiddle.net/7rFEn/embedded/result/

Upvotes: 0

Related Questions