Example
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:
-
The
.position-containermust havedisplay: table. -
The
.detailsmust have the real width setwidth: ....anddisplay: table-cell,vertical-align: middle. -
The
.thumbmust havewidth: 100%if you want that it will take all the remaining space and it will be influenced by the.detailswidth. -
The image (if you have an image) inside
.thumbshould havewidth: 100%, but it is not necessary if you have correct proportions.
