Alexander Reshytko Alexander Reshytko - 4 months ago 12
CSS Question

Bootstrap center an image inside the div but without resizing

I need to place the image inside the div. I know there are img-responsive center-block classes but they resize the given image for some reason. Is there a way to achieve the same goal but without size distortions.

Note: the containing div is a bootstrap column with given classes: hidden-xs col-lg-9 col-md-6 col-sm-6.

Thank you

Answer

CSS is my friend

can you try this CSS class

HTML

 <img class="centerd-image" src="">

 or

 <div class="centerd-image">
      <img src="">
 </div>

CSS

.centerd-image {
     margin: 0;
     position: absolute;
     top: 50%;
     left: 50%;
     margin-right: -50%;
     -moz-transform: translate(-50%, -50%);
     -ms-transform: translate(-50%, -50%);
     -o-transform: translate(-50%, -50%);
     -webkit-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
}