如何使内容垂直对齐在div [英] How to make contents vertical align inside div

问题描述

我尝试了不同的方式来调整div内的内容：

I have tried different ways to align contents inside div :

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

1) table and table cell but it acts weirdly with width

2）我有填充，因为数据不同，不能正确对齐每个内容。

2) I have padding which wont align properly with for every content because data differ.

注意：我的实际代码位于ng-repeat内

Note : My actual code is inside 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垂直对齐。

My Question : How content I make data inside div vertically align. Any help is appreciated.

推荐答案

根据您的浏览器支持，flexbox会实现这一点：$ b​​ $ b Browser支持： http://caniuse.com/#feat=flexbox

Depending on your browser support, flexbox will achieve this: Browser support: http://caniuse.com/#feat=flexbox

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

JSFiddle: http://jsfiddle.net/22xvnjd5/4/

我已将以下规则添加到您的代码中：

I've added the following rules to your code:

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

对齐不需要，但我也调整了图像最小高度导致在较小屏幕上出现巨大差距！

Not necessary for alignment, but I also adjusted the image min-height as it caused a massive gap on smaller screens!

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

这篇关于如何使内容垂直对齐在div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！