CODEWITHSUNDEEP
cssimagecss-positioncentervertical-alignment
Simon
Simon

Reputation: 351

Center an image vertically

I have developed a website for a gallery of images. Currently, each image is aligned to the top, I am wishing the image to be in the center of the DIV.

Here is my code:

.carousel .item {
  height: 900px;
  background-color: #777;
}
.carousel-inner > .item > img {
    top:5%;
    display: block;
    margin-left: auto;
    margin-right: auto  
}

Here is my website link too see it in action: http://www.canninginc.co.nz/canluciddream/screenshots.html

The last image is a good example. It is a small image, and I am wishing it to be placed vertically in the center.

Upvotes: 0

Views: 70

Answers (1)

Sobin Augustine
Sobin Augustine

Reputation: 3765

Try this css

.carousel .item {
        position:relative;
        height: 900px;
        background-color: #777;
}
.carousel-inner > .item > img {
        display: block;
        margin: auto;
        position: absolute;
        top: 0; left: 0; bottom: 0; right: 0;
 }

and try this, very helpful Absolute Horizontal And Vertical Centering In CSS

Upvotes: 1

Related Questions