How to make contents vertical align inside div - html

Question

I have tried different ways to align contents inside div :
1) table and table cell but it acts weirdly with width
2) I have padding which wont align properly with for every content because data differ.
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
My Question : How content I make data inside div vertically align.
Any help is appreciated.

Answer 1

Depending on your browser support, flexbox will achieve this:
Browser support: http://caniuse.com/#feat=flexbox
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;
}
}