How do I vertically centre an image of known dimensions inside a div (with variable height) having dynamic content?

Question

<div class="col-md-3 image-container">
    <img class="image" src="path-to-my-image">
</div>
<div class="col-md-9 dynamic-text-container">
    <p><!-- Dynamic text here --></p>
</div>

I am using bootstrap 3 in my project. How do I centre the image vertically inside the div having variable height (WITH CSS TABLE CENTERING)? Here's a demo: http://www.bootply.com/7rSVv7uDBu

Have you even tried to search around? I see this questions way to much! — Ruddy, May 28 '14 at 14:13
Yes. I have been doing the same for the last 3 days but no luck...Even Chris Coyier couldn't yield me an answer. — Dev P, May 28 '14 at 14:14
There a tons of ways to do this, please search around. Also if you feel this is a question that has never been asked before why not setup a demo for people to look at and have ago? Note: you could just use `position: absolute;` - [Look here](http://www.vanseodesign.com/css/vertical-centering/) — Ruddy, May 28 '14 at 14:17
Take a look at this, there are plenty of other examples in SO .... http://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-div — thedevlpr, May 28 '14 at 14:19
"Even Chris Coyier couldn't yield me an answer" - Funny...I don't recall seeing this question on CSS-Tricks forum. — Paulie_D, May 28 '14 at 14:33
@Ruddy I have explored them all, but to be more specific I need to use the css table centering method, which dint work in my case — Dev P, May 28 '14 at 14:45
@devP Its not working because where the image is the parent has no height! Its just sitting there. How can it centre on 0px height? — Ruddy, May 28 '14 at 14:49

score 2 · Accepted Answer · answered May 28 '14 at 14:53

Jsfiddle Demo

Amended CSS

.card{ 
  display:table; 
} 
.image-container,
.dynamic-text-container{ 
  display:table-cell; 
  vertical-align:middle; 
}

.image-container {
    width:25%; /* or some other value */
}


.image-container img {
    display: block;
    margin:0 auto;
}

score 1 · Answer 2 · edited May 28 '14 at 14:20

1

Take a look at this:

HTML:

<div class="col-md-3 image-container">
    <img class="image" src="image.png" height="200px;" width="200px" />
</div>
<div class="col-md-9 dynamic-text-container">
    <p>Some text....</p>
</div>

CSS:

.image-container {
    height: 600px;
    text-align: center;
}
.image {
    position: relative;
    top: 50%;
    margin-top: -100px; /* half of image height */
}

DEMO HERE

edited May 28 '14 at 14:20

Ruddy

9,795
5
45
66

answered May 28 '14 at 14:19

Prashank

796
6
12

@Ruddy; I appreciate your answer, but see, thats a matter of fixed heights which is not what I require. – Dev P May 28 '14 at 14:50

How do I vertically centre an image of known dimensions inside a div (with variable height) having dynamic content?

2 Answers2