Question

我正在使用bootstrap carousel示例并尝试修改它，以便我在旋转木马的中间获得较大图像的中心

.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: none;
  margin-bottom: auto;
  margin-top: auto;
}

<!-- Carousel-->
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
    <div class="item active">
      <img src="http://placehold.it/900x400" alt="">
      <div class="carousel-caption">
        click <a href="gallery.html">here</a> to visit the gallery
      </div>
    </div>
    <div class="item">
      <img src="http://placehold.it/900x400" alt="">
      <div class="carousel-caption">
        slide 2
      </div>
    </div>
    <div class="item">
      <img src="https://scontent-b-lhr.xx.fbcdn.net/hphotos-xpa1/t1.0-9/66889_1563569361772_6006784_n.jpg" alt="">
      <div class="carousel-caption">
        click <a href="artists.html">here</a> to visit FoxMind
      </div>
    </div>
    </div>

http://prntscr.com/3ommar

基本上试图将此图像向上移动，所以当我添加更大的图像时，它总是从中心获取一部分并将其放入旋转木马

Answer 1

好吧，我想我得到了你想要的东西！

/* Since positioning the image, we need to help out the caption */
.carousel-caption {
 z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel .item {
 height: 400px;
 background-color:white;
 }
 .carousel img {
  position: absolute;
   top:auto;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

尝试一下！这是一个小提琴：http://jsfiddle.net/ygF3L/

在旋转木马bootstrap 3 css内对齐图像

1 个答案: