javascript - 如何垂直对齐 float 的、流动的 div 中的内容？

Question

我使用 1140px 网格系统在流动 div 中的标题旁边 float 图像，如下所示:

<div class='row'>
  <div class='sixcol'>
    <img src='img/someImage.jpg'/>
  </div>
  <div class='sixcol last'>
    <h2>Large Header Text</h2>
  </div>
</div>

.row {
    width: 100%;
max-width: 1140px;
min-width: 755px;
margin: 0 auto;
overflow: hidden;
}
.sixcol {
    margin-right: 3.8%;
    float: left;
    min-height: 1px;
}
.row .sixcol {
    48%;
}
.sixcol h2 {
       text-align: center;
 }
.last {
    margin-right: 0px;
}
img {
    max-width: 100%;
    height: auto;
}
@media handheld, only screen and (max-width: 767px) {
    .row {
       width: 100%; min-width: 0; margin-left: 0px; margin-right: 0px;
   }
   .row .sixcol {
       width: auto; float: none; margin-left: 0px; margin-right: 0px;
   }
   .sixcol h2 {
       text-align: left;
    }
}

对于智能手机，标题被推到图像下方并与容器的左侧对齐，而在桌面上，所需的效果是标题始终位于图像右侧并垂直居中于展开/收缩图像高度.有没有办法只使用 CSS 和 HTML 来做到这一点？有没有简单的 JS/jQuery 解决方案？

Answer 1

在 div 上使用 display:table-cell;。 div 会像表格单元格一样 react ，因此您可以使用垂直对齐方式。