在 Bootstrap 列中垂直对齐中间

Question

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

我需要让控件左 () 垂直居中于该行。这怎么可能完成？ 我尝试删除行类并使用显示：表格和表格单元格，它们垂直对齐控件，但整个响应性都丢失了。

此处示例：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 -->

Answer 1

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

CSS：

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