CODEWITHSUNDEEP
cssimagecss-positionhtml
Dietfried Bello
Dietfried Bello

Reputation: 31

Move an image down

I am developing a webpage for images on a carousel. How can I move an image down in a DIV, or even center it vertically?

Here is my CSS code:

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

Here is a URL to the webpage in question to show you that the image is too high: http://www.canninginc.co.nz/canluciddream/screenshots.html

EDIT

Ok, I have edited the code by changing the:

margin-top: 50px;

I am still after the image to be lower in the div. I can increase the top margin, but this leaves a white background. What would be the best way to move the image a little bit lower?

Upvotes: 2

Views: 76863

Answers (5)

bring2dip
bring2dip

Reputation: 885

First of all make the .item position relative and then on css:

.carousel-inner > .item > img {
    position:absolute;
    top:25%;
    left:25%;
}

This will center the image vertically

Upvotes: 2

Bardicer
Bardicer

Reputation: 1469

The reason the image is going behind the navigation bar at the top is because you have the navigation bar's position set to fixed. This removes it from the rest of the page for styling purposes, in that the other divs/elements do not recognize it when they position themselves. If you remove the position: fixed; css on that item, the other elements will position relative to that one. Another option would be to add enough of a top margin to the image element to push it down below the top bar by default, whichever you prefer.

Upvotes: 0

Cthulhu
Cthulhu

Reputation: 1372

Your problem is not the image being placed too high - it is fixed header. So set margin-top:50px instead of -80px for .myCarousel.

Upvotes: 0

AshwinKumarS
AshwinKumarS

Reputation: 1313

Give margin top of 130px to the image and it looks cool!

margin-top: 130px;

Upvotes: 1

Walter Jamison
Walter Jamison

Reputation: 36

Put image inside the main body, set the main body to position: relative, then set the image to position: absolute; top: 0; left: 0;

If you can't put the image inside the main body, then add a negative margin-top to the main body.

Upvotes: 0

Related Questions