以另一個專案為中心

我們將看到如何根據 near 元素的高度來居中內容。

相容性：IE8 +，所有其他現代瀏覽器。

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%;
}

連結到 JSFiddle

要點是 3 .thumb，.details 和 .position-container 容器：

• .position-container 必須有 display: table。

• .details 必須具有真正的寬度設定 width: .... 和 display: table-cell，vertical-align: middle。

• .thumb 必須有 width: 100%，如果你想要佔用所有剩餘的空間，它將受到 .details 寬度的影響。

• .thumb 內的影象（如果你有影象）應該有 width: 100%，但如果你有正確的比例則沒有必要。