css - 在Bootstrap列中垂直对齐中间

在Bootstrap轮播项目中，我在Bootstrap列中嵌套了一行图像。它们的高度根据列的宽度而变化。在同一行中，还具有用于更改轮播项目的轮播控件LEFT和RIGHT。

我需要使控件的左（）垂直居中于行。如何做到这一点？
我试图删除行类并使用dislay：table和table-cell，它们垂直对齐控件，但是失去了整体响应能力。

此处的示例：http://testabc.borec.cz/

HTML（轮播）：

<div id="monthly-tips" class="carousel slide showcase showcase-1 text-center"><!-- class of slide for animation -->
  <h1>Title</h1>
  <div class="carousel-inner">
    <div class="item container-fluid active">

        <div class="row" style="display: flex;
    align-items: center;">
          <div class="col-xs-1 nopadding">
            <a class="carousel-control left" href="#monthly-tips" data-slide="prev">
              <span class="gi gi-chevron-left"></span>
            </a>
          </div>
          <div class="col-xs-10 col-sm-5 col-md-3">
            <img src="./img/books/syn-spravce-sirotcince.jpg" class="envelope js-book1" alt="" />
          </div>
          <div class="hidden-xs col-sm-5 col-md-4">
            <img src="./img/books/tanec-s-nepritelem.jpg" class="envelope js-book2" alt="" />
          </div>
          <div class="hidden-xs hidden-sm col-md-3">
            <img src="./img/books/syn-spravce-sirotcince.jpg" class="envelope js-book1" alt="" />
          </div>
          <div class="col-xs-1 nopadding">
            <a class="carousel-control right" href="#monthly-tips" data-slide="next">
              <span class="gi gi-chevron-right"></span>
            </a>
          </div>
        </div>

        <div class="row">
          <div class="col-xs-1 nopadding"></div>
          <div class="col-xs-10 col-sm-5 col-md-3">
            <span class="bottom-shadow"></span>
          </div>
          <div class="hidden-xs col-sm-5 col-md-4">
            <span class="bottom-shadow"></span>
          </div>
          <div class="hidden-xs hidden-sm col-md-3">
            <span class="bottom-shadow"></span>
          </div>
          <div class="col-xs-1 nopadding"></div>
        </div>

        <div class="row info-holder">

          <div class="col-xs-1 nopadding"></div>
          <div class="col-xs-10 col-sm-5 col-md-3">
            <p class="book-title">Syn správce sirotčince</p>
            <p class="book-author">Adam Johnson</p>
          </div>
          <div class="hidden-xs col-sm-5 col-md-4">
            <p class="book-title">Tanec s nepřítelem</p>
            <p class="book-author">Ruta Sepetysová</p>
          </div>
          <div class="hidden-xs hidden-sm col-md-3">
            <p class="book-title">Tanec s nepřítelem</p>
            <p class="book-author">Ruta Sepetysová</p>
          </div>
          <div class="col-xs-1 nopadding"></div>
        </div>
    </div>

    <div class="item">
      <img src="http://placehold.it/1200x480" alt="" />
      <div class="carousel-caption">
        <p>Caption text here</p>
      </div>
    </div>
  </div>
</div><!-- carousel monthly-tips -->

最佳答案

您可以像这样在align-items容器上添加新的CSS属性.row：

CSS：

.row { // add a new class to your row and target your newest class
    display: flex;
    align-items: center;
}

关于css - 在Bootstrap列中垂直对齐中间，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25162020/