Question

我正在为旋转木马上的图像开发一个网页。如何在DIV中向下移动图像，或者甚至垂直居中？

这是我的CSS代码：

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

以下是相关网页的网址，向您显示图片太高：http://www.canninginc.co.nz/canluciddream/screenshots.html

修改

好的，我已经通过更改：

编辑了代码

margin-top: 50px;

我仍然在图像中降低div。我可以增加上边距，但这会留下白色背景。将图像移动一点点的最佳方法是什么？

Answer 1

将图像放入主体内，将主体设置为position：relative，然后将图像设置为position：absolute;顶部：0;左：0;

如果无法将图像放入主体内，请在主体上添加负边距顶部。

Answer 2

为图像提供130px的上边距，看起来很酷！

margin-top: 130px;

Answer 3

你的问题不是图像放得太高 - 它是固定的标题。因此，为margin-top:50px设置.myCarousel而不是-80px。

Answer 4

图像位于顶部导航栏后面的原因是您将导航栏的位置设置为固定。这会将其从页面的其余部分移除以用于样式目的，因为其他div /元素在它们自己定位时不会识别它。如果你删除位置：固定;关于该项目的css，其他元素将相对于该项目定位。另一种选择是在图像元素上添加足够的上边距，默认情况下将其向下推到顶部栏下方，无论您喜欢哪种。

Answer 5

首先使.item位置相对，然后在css：

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

这将使图像垂直居中

向下移动图像

5 个答案: