Question

我有一个高大的图像作为左列（#watch）和一个div作为右列（#watch-column），向上推左。我试图垂直居中，但无法找到有效的东西。

这样做的最佳方式是什么？你可以看到我的网站有点流畅。谢谢！

<section id="time-keeper-overview-id">
   <div class="row" id="watch-parent">
      <img id="watch" src="img/watch.png" class="img-responsive" alt="Responsive image">
      <div id="watch-column">
         <div id="time-keeper-description">
            <p>Insert paragraph of text here</p>
         </div>
         <img id="bus-stop-waves" src="img/bus-stop-waves.png" class="img-responsive" alt="Responsive image">
      </div>
   </div>
</section>

#watch {
  float: left;
  max-height: 100% !important;
  padding-right: 4%;
}

#watch-column {
  vertical-align: middle !important;
  overflow: hidden;
}

完整网站位于http://goo.gl/O1q5B5

Answer 1

我注意到使用css display：table-cell;表格显示的类似css属性使用div或容器允许垂直对齐。

display: table-cell;
vertical-align: middle;

同时使用值设置css line-height属性允许vertical-align：middle;工作也好。

另见参考：http://css-tricks.com/centering-in-the-unknown/

Flex Box也允许这种类型的对齐，但Flex Box与那些没有自动更新（也称为“Ever Green”浏览器）的旧浏览器不完全兼容 - http://eisenbergeffect.bluespire.com/evergreen-browsers/

另请参阅 - Flex Box垂直对齐：http://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

你也可以在css中使用相对和绝对的位置属性，然后说top：50％;这完全取决于您的设计和要求如何最适合您的项目。

Answer 2

实际上，您只能通过设置内部容器的高度来实现这一点。在您的情况下，您应该为#time-keeper-description设置高度并在外部容器上设置其他属性。试试这个补充：

#time-keeper-description {
    height:500px /* or whatever suits your content */
}

#watch-column {
    position: absolute;
    top: 50%;
    margin-top: -250px; /* half of #time-keeper-description height */

}

如果您无法设置固定高度，请在div上使用：

display: table-cell;
vertical-align: middle;

希望这有帮助！ ;）

Answer 3

我将在这里回答我自己的问题。感谢所有发布的内容！

Flexbox在这种情况下提供了最佳解决方案，其中图像必须是视口高度和自动宽度，但设计的其余部分必须是流动的。请注意，flex: 0 0 auto;使用max-height: 100%;可以使图片保持全高并保持正确的宽度。

#watch-parent {
   display: -webkit-flex;
   display: -moz-box;
   display: -ms-flexbox;
   display: flex;

   -webkit-align-items: center;
   -moz-box-align: center;
   -ms-align-items: center;
   align-items: center;
}

#watch {
   max-height: 100%;
   -webkit-flex: 0 0 auto;
   -moz-box-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
   padding-right: 4%;
}

垂直中心div

3 个答案: