Vertically align middle in Bootstrap column

问题

In a Bootstrap carousel item, I have a row of images nested in Bootstrap columns. Their height varies according to the width of columns. In the same row, there are also carousel controls LEFT and RIGHT for changing the items of the carousel.

I need to have the controls left (<) and right (>) vertically centered to the row. How can this be acomplished? I tried to remove the row class and use the dislay: table and table-cell, which aligned controls vertically, but whole responsiveness was lost.

Example here: http://testabc.borec.cz/

HTML (carousel):

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

回答1:

You can add a new css property align-items on your .row container like this :

CSS :

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

来源：https://stackoverflow.com/questions/25162020/vertically-align-middle-in-bootstrap-column