在 Bootstrap 中垂直居中对齐的响应图像答案

【问题标题】：Responsive Image to align vertically centered in Bootstrap在 Bootstrap 中垂直居中对齐的响应图像
【发布时间】：2014-08-18 16:02:10
【问题描述】：

我使用 .center-block 类成功地使 img 水平对齐，但对于 vertically center aligned，我得到了看似异常的结果。谁能告诉代码有什么问题？

<style>
   .center-y{vertical-align:middle;}
</style>

<div class="row">
   <div class="col-lg-12 col-md-12 col-xs-12 col-sm-12 ">
      <img class="animated center-block img-responsive center-y" src="website%20logo.png" alt="logo" onload="animate_in();" width="800" height="600"  id="img_logo" onclick="animate_out();" />
   </div>
</div>

这里是JSFiddle

更新：

我想出了一种使用纯 CSS 的方法，即

<style>
  img{
     max-height: 90%;
     max-width: 90%;
     position: absolute;
     top: 0;
     bottom: 0;               
     left: 0;
     right: 0;             
     margin: auto;                
     border: 2px solid rgb(44,44,44);                           
   }


</style>
  <img class="animated" src="website%20logo.png" alt="logo" onload="animate_in();" width="800" height="600" id="img_logo" onclick="animate_out();" />

这里是JSfiddle

效果很好，但您看到图像不再响应了吗？ :) 那么如何通过合并 Bootstrap 类 img-responsive 来实现相同的目标？

【问题讨论】：

仅供参考，您的样式中缺少center-y 上的点。
垂直中心不是这样工作的。根据情况有很多方法，这里有一些东西可以尝试：zerosixthree.se/…smashingmagazine.com/2013/08/09/…davidwalsh.name/css-vertical-center
对不起，我已经编辑过了，我在 SO 上发帖时错过了点。在我的代码中没关系@Moogs
我认为vertical-align 仅适用于inline，不适用于block 元素。
我知道，因为col-md-x 得到img 的高度，所以你不能真正垂直对齐它。至少我现在是这样描绘整个事情的，你能给我们jsfiddle吗？而且上面的评论也有可能是哪里出了问题，不知道img-responsive类是干什么的。

标签： html css twitter-bootstrap responsive-design twitter-bootstrap-3

【解决方案1】：

所以我使用 JQuery 解决了这个问题，使用 Jquery 的解决方案很简单。仍然想知道是否有 css 方法来实现它；）

解决方法代码如下：

 $( window ).on('load resize',function() {
                    window_size = $(window).height();
                    img_ht= $('#img_logo').height();

                    difference_ht=(window_size) - (img_ht);
                    console.log(difference_ht);
                    margin_ht=(difference_ht/2).toFixed();
                    margin_ht+="px";
                    $("#img_logo").css({"margin-top": margin_ht});
            });

还有JSFiddle

【讨论】：