如何垂直居中流体左列和浮动右列？

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>

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

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>

Answer 2

您可以使用 display: table-cell 来实现垂直对齐。然而，这使用了不同的 HTML（和 CSS）。

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

#right {
 border: 1px solid green;
 width: 100px;
 transition: 1s width;
    display: table-cell;
    vertical-align: middle;
}

#left {
 border: 1px solid green;
 width: auto;
 overflow: hidden;
    display: table-cell;
}

这是一个小提琴：http://jsfiddle.net/woj3s8La/