Center an image vertically inside a div for a column

Question

This is what I currently have:

            <div class="col-lg-10 col-lg-offset-1 text-center">
                <h2>Title</h2>
                <hr class="small">
                <div class="row">
                    <div class="col-md-6" id="logo">
                        <div class="portfolio-item">
                            <img class="img-portfolio img-responsive" src="logo.jpg">
                        </div>
                    </div>
                    <div class="col-md-5" id="description">
                        <div class="portfolio-item">
                              Text
                        </div>
                    </div>
                </div>

I want to be able to center the image inside the column on the left, but I'm not exactly sure how. I've tried to follow this one here but it didn't work properly. How to vertically align an image inside div

http://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3 — Pbk1303, May 12 '16 at 02:02

Tiago Fabre · Answer 1 · 2016-05-12T02:30:29.317

Try this:

http://codepen.io/tiagofabre/pen/LNagaB

Also there is a realy cool article about flex in this link:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.vertical-center {
  min-height: 100%;
  min-height: 100vh; 

  display: flex;
  align-items: center;
}

<div class="col-lg-10 col-lg-offset-1 text-center">
  <h2>Title</h2>
  <hr class="small">
  <div class="container-fluid col-md-6 vertical-center">
    <div class="col-sm-12 bg-green">
      <img class="img-responsive center-block" src="http://placeimg.com/100/100/animals" />
    </div>
  </div>
  <div class="container-fluid col-md-6 vertical-center">
    <div class="col-sm-12 bg-green">
      <div class="portfolio-item">Text</div>
    </div>
  </div>
</div>

Is that working to you, why don't you marks that as solved ? — Tiago Fabre, Jul 09 '16 at 21:26

score 0 · Answer 2 · answered May 12 '16 at 02:01

0

into parent div, add this class:

col-lg-6 col-lg-push-6

like this:

<div class="col-lg-6 col-lg-push-6" id="logo">
    <div class="portfolio-item">
        <img class="img-portfolio img-responsive" src="logo.jpg">
    </div>
</div>

answered May 12 '16 at 02:01

Lemayzeur

8,297
3
23
50

score 0 · Answer 3 · 2016-05-12T02:26:54.667

0

You can set portfolio-item position to relative and img to position absolute and give the image top: 50%; transform: translateY(-50%) https://jsfiddle.net/pu4L80gq/

Also you can use JS to determine image container height and image height to give margin-top to image or padding-top to the container :

(image container height - image height) would give you the rest space in the container then divide it on two and with this value you can center your image vertically https://jsfiddle.net/pu4L80gq/1/

$(document).ready(function () {
    var imgContHeight = $('.img-container').height();
    var image = $('.img-container img');
    var imgHeight = image.height();

    image.css({
        marginTop: (imgContHeight - imgHeight) / 2
    });
});

edited May 12 '16 at 02:26

answered May 12 '16 at 02:08

I've tried that but the problem is if the right row (`description`) is taller than the image it doesn't put it in the middle. If I specifically define the height of the image column then it works but if I don't it doesn't work – Peter G May 12 '16 at 02:14
So the solution is giving fixed height to the image also see the edit. – May 12 '16 at 02:33

Center an image vertically inside a div for a column

3 Answers3