Centering in relation to another item

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-container must have display: table.
The .details must have the real width set width: .... and display: table-cell, vertical-align: middle.
The .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.
The image (if you have an image) inside .thumb should have width: 100%, but it is not necessary if you have correct proportions.

Found a mistake? Have a question or improvement idea? Let me know.

Table Of Contents