Question

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

我需要让控件左（＆lt;）和右（＆gt;）垂直居中于行。怎么能完成这个？我试图删除行类并使用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 -->

Answer 1

您可以在align-items容器上添加新的css属性.row，如下所示：

CSS：

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

在Bootstrap列中垂直对齐中间

1 个答案: