Question

在我的项目中，有两列。左侧包含的图像最多为左列宽度的100％，具有自动高度。右边宽度不同，左边填充剩余空间。这使用JackJoe's answer中描述的技术来解决上一个问题。

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

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

但是，出于某种原因，top: 50%部分根本不起作用。这是我当前的代码，没有垂直居中尝试（这可以按预期工作）：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

Answer 1

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

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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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/

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

2 个答案: