html - 响应图像在 Bootstrap 中垂直居中对齐

Question

我成功地使用 .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 来实现同样的事情呢？

Answer 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