我怎样才能使左流动的立柱和浮动的右立柱垂直居中？

Question

在我的项目中，有两列。 左侧包含的图像最大为左侧列宽度的100％，并且具有自动高度。 右侧的宽度变化，而左侧的宽度则填充剩余空间。 这使用了JackJoe对上一个问题的答案中描述的技术。

我现在想做的是将列的垂直居中位置并减小高度。 有时右栏或左栏较短，具体取决于窗口的宽度。 我尝试使用

{
  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将内容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/