如何使内容内的div

Question

垂直对齐

我曾尝试不同的方法来对齐内部格内容：

1）表和表格单元格，但它与宽度

2）I具有填充其不会对齐古怪行为因为数据不同，所以适合每个内容。

注：我的实际代码里面NG-重复

HTML：

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-12 col-md-12"> 
     <div class="offer-horizontal col-sm-6 col-md-6"> 
      <div class="col-sm-6 col-md-6 offer-logo-div-horizontal" > 
      <img src="https://icon.uiowa.edu/help/wp-content/uploads/2014/07/ICON_logo_only.png" alt="nothing" style="height:20px;width:50px;" class="offer-logo-horizontal"> 
      </div> 
      <div class="col-sm-6 col-md-6"> 
      <span class="offer-description-horizontal" ng-bind-html="offer.description | words:15"></span> 
      <p>Some really large label that will wrap to multiple lines in small screens</p> 
      <div> 
       <button> 
       shop now 
       </button> 
      </div> 
      </div> 
     </div> 
     <div class="offer-horizontal col-sm-6 col-md-6 "> 
      <div class="col-sm-6 col-md-6 offer-logo-div-horizontal" style="text-align:center;"> 
      <img src="http://www.iconplc.com/icon-files/images/image-bank-component/other/icon-logo.jpg" style="height:20px;width:50px;" class="offer-logo-horizontal"> 
      </div> 
      <div class="col-sm-6 col-md-6"> 
      <span class="offer-description-horizontal" ng-bind-html="offer.description | words:15"></span> 
      <p>Some really large label that wil</p> 
      <div> 
       <button> 
       shop now 
       </button> 
      </div> 
      </div> 
     </div> 
     <div class="offer-horizontal col-sm-6 col-md-6"> 
      <div class="col-sm-6 col-md-6 offer-logo-div-horizontal" style="text-align:center;"> 
      <img src="https://upload.wikimedia.org/wikipedia/commons/9/9e/Icons_logo_normal.jpg" alt="nothing" style="height:20px;width:50px;" class="offer-logo-horizontal"> 
      </div> 
      <div class="col-sm-6 col-md-6"> 
      <span class="offer-description-horizontal" ng-bind-html="offer.description | words:15"></span> 
      <p>Some really large </p> 
      <div> 
       <button> 
       shop now 
       </button> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 

CSS：

.offer-horizontal { 
     min-height: 194px; 
     background-color: #EEF0F1; 
     border: 5px solid #fff; 
     text-align:center; 
    } 
    .offer-logo-div-horizontal { 
    min-height: 194px; 
    text-align: center; 
} 
    .offer-logo-horizontal { 
    max-height: 100%; 
    max-width: 100%; 
    width: auto; 
    height: auto; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
} 

​​

我的问题：如何内容我让里面的数据div垂直对齐。 任何帮助表示赞赏。

Answer 1

根据您的浏览器的支持，那么Flexbox将实现这一点： 浏览器支持：http://caniuse.com/#feat=flexbox

的jsfiddle： http://jsfiddle.net/22xvnjd5/4/

我已经添加了以下规则代码：

.offer-horizontal { 
    padding-bottom:20px; /* Tidy up the spacing on smaller screens */ 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-flow: row wrap; 
} 

不需要对齐，但我也调整了图像的最小高度，因为它在较小的屏幕上造成了巨大的差距！

.offer-logo-div-horizontal { 
    min-height: 90px; 
} 
@media (min-width: 768px) { 
    .offer-horizontal { 
     min-height:194px; 
    } 
}