在固定高度的 Bootstrap 旋转木马上垂直居中显示图像答案

【问题标题】：Vertically center the showing images on a fixed height Bootstrap carousel在固定高度的 Bootstrap 旋转木马上垂直居中显示图像
【发布时间】：2015-06-30 19:08:10
【问题描述】：

也许这是最艰巨的挑战之一，如何在这个固定高度的 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>

【问题讨论】：

标签： javascript jquery css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

将此添加到您的 CSS：

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

【讨论】：

【解决方案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%);
}

【讨论】：

查看您的版本jsfiddle.net/3329o5z7，但仍然没有对translateY(-50%) 浏览器兼容性投反对票。
抱歉翻译错误，但看起来你明白了 :)
我忘了测试它没有拼写错误jsfiddle.net/3329o5z7/1，它就像stackoverflow.com/a/31146558/4883372 一样工作。
@5ervant 在 jsfiddle 上工作，但在真正的浏览器上得到跳转图像

【解决方案3】：

设置position:absolute，所有边为0 和margin:auto。

给你：

/* 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;
}

<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>

【讨论】：

【解决方案4】：

看看这是不是你要找的东西：可能应该用实际的图片来测试它，以确保它看起来正确。

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

}

【讨论】：