We will see how to center content based on the height of a near element.
Compatibility: IE8+, all other modern browsers.
HTML
<div class="content">
<div class="position-container">
<div class="thumb">
<img src="<http://lorempixel.com/400/200/>">
</div>
<div class="details">
<p class="banner-title">text 1</p>
<p class="banner-text">content content content content content content content content content content content content content content</p>
<button class="btn">button</button>
</div>
</div>
</div>
CSS
.content * {
box-sizing: border-box;
}
.content .position-container {
display: table;
}
.content .details {
display: table-cell;
vertical-align: middle;
width: 33.333333%;
padding: 30px;
font-size: 17px;
text-align: center;
}
.content .thumb {
width: 100%;
}
.content .thumb img {
width: 100%;
}
Link to JSFiddle
The main points are the 3 .thumb
, .details
and .position-container
containers:
.position-container
must have display: table
..details
must have the real width set width: ....
and display: table-cell
, vertical-align: middle
..thumb
must have width: 100%
if you want that it will take all the remaining space and it will be influenced by the .details
width..thumb
should have width: 100%
, but it is not necessary if you have correct proportions.