CSS 向下移动图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18778412/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Move an image down
提问by Dietfried Bello
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?
我正在为旋转木马上的图像开发一个网页。如何在 DIV 中向下移动图像，甚至垂直居中？
Here is my CSS code:
这是我的 CSS 代码：
.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
这是相关网页的 URL，向您显示图像太高：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?
我仍然希望图像在 div 中较低。我可以增加上边距，但这会留下白色背景。将图像移低一点的最佳方法是什么？
采纳答案by bring2dip
First of all make the .item position relative and then on css:
首先使 .item 位置相对，然后在 css 上：
.carousel-inner > .item > img {
position:absolute;
top:25%;
left:25%;
}
This will center the image vertically
这将使图像垂直居中
回答by AshwinKumarS
Give margin top of 130px to the image and it looks cool!
为图像设置 130px 的边距顶部，它看起来很酷！
margin-top: 130px;
回答by Walter Jamison
Put image inside the main body, set the main body to position: relative, then set the image to position: absolute; top: 0; left: 0;
将图像放入主体内部，将主体设置为位置：相对，然后将图像设置为位置：绝对；顶部：0；左：0；
If you can't put the image inside the main body, then add a negative margin-top to the main body.
如果您不能将图像放在主体内部，则在主体中添加负边距顶部。
回答by Cthulhu
Your problem is not the image being placed too high - it is fixed header. So set margin-top:50pxinstead of -80px for .myCarousel.
您的问题不在于图像放置得太高 - 它是固定的标题。所以设置margin-top:50px而不是 -80px .myCarousel。
回答by Bardicer
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.
图像在顶部导航栏后面的原因是因为您将导航栏的位置设置为固定。出于样式目的，这会将其从页面的其余部分中删除，因为其他 div/元素在定位时无法识别它。如果删除位置：固定；css 在该项目上，其他元素将相对于该项目定位。另一种选择是为图像元素添加足够的顶部边距，默认情况下将其向下推到顶部栏下方，无论您喜欢哪种方式。
