CSS Centering in relation to another item


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-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.