jquery - 如何垂直居中流动的左列和 float 的右列？

Question

在我的元素中，有两列。左侧包含一个图像，该图像最大为左列宽度的 100%，并具有自动高度。右侧宽度不同，而左侧填充剩余空间。这使用了 JackJoe's answer 中描述的技术。上一个问题。

我现在要做的是将高度较小的列垂直居中。有时右列或左列较短，具体取决于窗口的宽度。我试过使用

{
  position: relative;
  top: 50%;
  transform: translateY(-50%); //with more prefixes
}

但是，由于某些原因，top: 50% 部分根本不起作用。这是我当前的代码，没有垂直居中尝试(这按预期工作):

$(document).ready(function() {
 $("#right").click(function() {
   $(this).toggleClass("wide");
 });
});

#container {
 width: 100%;
 border: 1px solid red;
 height: auto;
 overflow: hidden;
}

#right {
 float: right;
 border: 1px solid green;
 width: 100px;
 transition: 1s width;
}

#left {
 border: 1px solid green;
 width: auto;
 overflow: hidden;
}

#left img {
 max-width: 100%;
 height: auto;
}

#right.wide {
 width: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
 <div id="right">
  Click Me
 </div>
 <div id="left">
  <img src="http://placehold.it/440x120"/>
 </div>
</div>

编辑:我忘了指定——右列的宽度需要取决于其内容的宽度，就像内联 block 元素的宽度没有设置宽度一样。我只是在演示中使用了精确的宽度来展示列的流动性。

Answer 1

您可以使用 CSS 表格来获得所需的结果。将 display: table-cell 应用于左右元素，并将 vertical-align: middle 应用于垂直居中内容。

这是一种非常稳健的方法，适用于大多数现代浏览器。

主要优点是您不需要任何 JavaScript/jQuery 来调整布局。

更新:如果您有在右侧显示/隐藏的可选元素，垂直居中仍然有效。

$(document).ready(function() {
 $("#right").click(function() {
   $(this).toggleClass("wide");
 });
});

#container {
  width: 100%;
  border: 1px solid red;
  height: auto;
  display: table;
}
#right {
  display: table-cell;
  vertical-align: middle;
  border: 1px solid green;
  width: 200px;
  transition: 1s width;
}
#left {
  display: table-cell;
  vertical-align: middle;
  border: 1px solid green;
  width: auto;
}
#left img {
  width: 100%;
  height: auto;
  display: block;
}
#right.wide {
  width: 300px;
}
#right p.extra {
  display: none;
}
#right.wide p.extra {
  display: block;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div id="left">
    <img src="http://placehold.it/440x120" />
  </div>
  <div id="right"><p><b>Click Me</b></p>
    <p class="extra">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer facilisis velit ut neque tempor quis cursus tortor suscipit. Curabitur rutrum magna vitae arcu pharetra eget cursus ante accumsan. Nunc commodo malesuada adipiscing. Pellentesque consequat laoreet sagittis. Sed sit amet erat augue. Morbi consectetur, elit quis iaculis cursus, mauris nulla hendrerit augue, ut faucibus elit sapien vitae justo. In a ipsum malesuada nulla rutrum luctus. Donec a enim sapien. Sed ultrices ligula ac neque vulputate luctus. Suspendisse pretium pretium felis, in aliquet risus fringilla at. Nunc cursus sagittis commodo.</p>
  </div>
</div>