1

我正在为轮播上的图像开发网页。如何在 DIV 中向下移动图像，甚至垂直居中？

这是我的 CSS 代码：

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

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

编辑

好的，我通过更改以下内容来编辑代码：

margin-top: 50px;

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

4

5 回答 5

1

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

margin-top: 130px;
于 2013-09-13T04:49:10.550 回答
0

将图像放入主体内，将主体设置为位置：相对，然后将图像设置为位置：绝对；顶部：0；左：0；

如果您不能将图像放在主体内，则在主体上添加负边距顶部。

于 2013-09-13T04:48:43.153 回答
0

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

于 2013-09-13T04:49:18.640 回答
0

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

于 2013-09-13T04:50:13.673 回答
0

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

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

这将使图像垂直居中

于 2013-09-13T05:14:27.570 回答