CODEWITHSUNDEEP
htmlcsstwitter-bootstrapresponsive-designtwitter-bootstrap-3
Faisal Ashfaq
Faisal Ashfaq

Reputation: 2668

Responsive Image to align vertically centered in Bootstrap

I got success in getting the img horizontal aligned using .center-block class but for vertically center aligned I am getting seemingly anomalous results. Can anyone please tell what's wrong with the code?

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

Here is JSFiddle

Update:

I figured out a way to do it using pure CSS i.e

<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();" />

Here is the JSfiddle

It works great but you see image is no more responsive? :) So how can I achieve the same thing with the incorporation of Bootstrap class img-responsive?

Upvotes: 1

Views: 594

Answers (1)

Faisal Ashfaq
Faisal Ashfaq

Reputation: 2668

So I figured it out using JQuery, it's solution is simple using Jquery. Still wondering if there is css way to acheive it ;)

Here is the solution code:

 $( 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});
            });

and the JSFiddle

Upvotes: 2

Related Questions