Question

也许这是最棘手的挑战之一，如何在这个固定高度Bootstrap （v3.3.5）轮播中显示图像的中间垂直对齐？我尝试display将某些课程设为table-cell，将vertical-align设为middle，但仍存在问题，滑动图片在滑动完成后将垂直对齐或者当.active时，它也会将图像放在右侧而不是中心。

/* The styles that I tried.
.carousel-inner > .item.next.left,
.carousel-inner > .item.prev.right,
.carousel-inner > .item.active {
    display: table-cell;
    vertical-align: middle;
} */

.carousel-inner > .item {
    height: 150px;
}

.carousel-inner img {
    margin: auto;
}

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
    <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" role="listbox">
            <div class="item active">
                <img src="http://placehold.it/350x65" alt="350x65">
                <div class="carousel-caption">
                    <h3>Item 1</h3>
                    <p>Not vertically center..</p>
                </div>
            </div>
            <div class="item">
                <img src="http://placehold.it/350x150" alt="350x150">
                <div class="carousel-caption">
                    <h3>Item 2</h3>
                    <p>The image height is just fit..</p>
                </div>
            </div>
            <div class="item">
                <img src="http://placehold.it/200x100" alt="200x100">
                <div class="carousel-caption">
                    <h3>Item 3</h3>
                    <p>Not vertically center..</p>
                </div>
            </div>
        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>


    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>

Answer 1

将此添加到您的css：

.carousel-inner .item img {
    position:relative;
    top:50%;
    transform: translateY(-50%);
}

Answer 2

您可以绝对确定元素的位置，确保父元素的位置相对，以便子元素尊重它的位置。

.carousel-inner > .item {
    height: 150px;
    position: relative;
}

.carousel-inner img {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

Answer 3

将position:absolute设置为0和margin:auto。

你走了：

＆＃13;

/* The styles that I tried.
.carousel-inner > .item.next.left,
.carousel-inner > .item.prev.right,
.carousel-inner > .item.active {
    display: table-cell;
    vertical-align: middle;
} */

.carousel-inner > .item {
  height: 150px;
}
.carousel-inner img {
  margin: auto;
}
.carousel-inner .item img {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

＆＃13;

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>

<body>
  <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" role="listbox">
      <div class="item active">
        <img src="http://placehold.it/350x65" alt="350x65">
        <div class="carousel-caption">
          <h3>Item 1</h3>
          <p>Not vertically center..</p>
        </div>
      </div>
      <div class="item">
        <img src="http://placehold.it/350x150" alt="350x150">
        <div class="carousel-caption">
          <h3>Item 2</h3>
          <p>The image height is just fit..</p>
        </div>
      </div>
      <div class="item">
        <img src="http://placehold.it/200x100" alt="200x100">
        <div class="carousel-caption">
          <h3>Item 3</h3>
          <p>Not vertically center..</p>
        </div>
      </div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>


  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>

＆＃13;

Answer 4

看看这是否是你正在寻找的东西：应该用实际图片进行测试，以确保它看起来正确。

.carousel-inner .item img {
margin: 0px auto;
height: 150px;
text-align: center;

}

将显示图像垂直居中于固定高度的Bootstrap轮播

4 个答案: