Question

我的投资组合页面正在慢慢达到我想要的位置。但是，仍然有一个问题。我有一些引导轮播，它们都具有以下代码：

<div id="carousel" class="carousel slide carousel-fade" data-ride="carousel" data-interval="false">

<div id="carousel" class="carousel slide carousel-fade" data-ride="carousel" data-interval="false">
      <ol class="carousel-indicators">
        <li data-target="#carousel" data-slide-to="0" class="active"> </li >
        <li data-target="#carousel" data-slide-to="1"> </li>
        <li data-target ="#carousel" data-slide-to="2"> </li>
      </ol >

      <div class="carousel-inner">
        <div class="item active" >
        <img class="d-block w-50" src="image1.jpg" alt="First slide">
        <div class="carousel-captionp" "position=static">
     <h1><Caption</h1>
      </div>
      </div>
      <div class="item">
      <img class="d-block w-50" src="image2.jpg" alt="Second slide">
      <div class="carousel-captionp">
        <h1>Caption</h1>
      </div>
      </div>
      <div class="item">
      <img class="d-block w-50" src="image3.jpg" alt="Third slide">
      <div class="carousel-captionp">
      <h1>Caption</h1>
      </div>
      </div>


      <a class="portrait right carousel-control" href="#carousel" data-slide="next">
      <span><img src="css/ARROW.png" width="50%" padding-top="50%"></span>
      </a>
      </div>
      </div>

使用以下CSS：

.carousel {
  position: relative;

}
.carousel-inner {
  position: relative;
  vertical-align: middle;
  width: 100%;
  max-height: 98vh;
  overflow: hidden;
}


.carousel-inner > .item {
  position: relative;
    vertical-align: middle;
  display: none;
  -webkit-transition: .6s ease-in-out left;
       -o-transition: .6s ease-in-out left;
          transition: .6s ease-in-out left;
}

我的想法是图像保持在98vh，因此轮播永远不会超过窗口高度。增大窗口的尺寸会导致底部图像的裁剪，同时根据页面的宽度缩放比例。我想问的是，是否有人知道如何在顶部和底部进行这种修剪，从而使图片在中间保持对齐？在CSS中垂直对齐无法解决问题...

预先感谢

垂直对准引导带转盘

0 个答案: