Question

我在carousel.css文件（bootstrap）中有这个，我将图像的宽度设置为900px，但我想在屏幕中间有这个图像，怎么做？（我试图编辑左变量，但没有发生任何事情，我想要它没有修复，像<center></center>）

.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 900px;
  height: 500px;
}

的index.html：

<div id="myCarousel" class="carousel slide" data-ride="carousel" >
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active">
            <img data-src="holder.js/900x500/auto/#777:#7a7a7a/text:blabla" alt="First slide">
            <div class="container">
                <div class="carousel-caption">
                    <h1>aaa</h1>
                    <p>xxxx</p>
                </div>
            </div>
        </div>
    </div>
    <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>

Answer 1

您也可以将#myCarousel div的宽度设置为900px并margin: 0 auto。

Answer 2

如果您只想横向居中，可以margin: 0 auto;并摆脱绝对定位。如果你想垂直和水平居中，你可以做

.carousel-inner{
position: relative;
}
.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 900px;
  height: 500px;
}

如何在屏幕中间设置轮播？

2 个答案: