如何使內容內的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; 
    } 
}