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

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

1 个答案: