html - 如何使内容在div内垂直对齐

Question

我尝试了不同的方法来对齐 div 中的内容:

1) 表格和表格单元格，但它的宽度行为很奇怪

2) 我有填充，由于数据不同，每个内容都无法正确对齐。

注意:我的实际代码在 ng-repeat 中

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

JSFiddle

我的问题:我如何使 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;
    }
}