How do you vertically align an image to the middle of a div?

Question

I am trying to put an image in a div and vertically align to the middle so it follows the previous div. It goes like this

HTML

<div id="navigation">Navigation</div>
<div id="header"><img src="link"/></div>
<div id="content">content</div>

CSS

#header {
  height: 150px;
  width: 760px;
  background: red;
}

What line of code would I need in order to make this happen? Whenever I put the image, it stays in the bottom of the div. I want to raise the image so it goes to the top. There is no css code for aligning to the top. Just left and right.

score 1 · Answer 1 · answered Feb 19 '14 at 23:29

1

Can you use jQuery? if so try this:

<script>
    $(document).ready(function(){
        var headerHeight = $(".header").height();
        var imageHeight = $(".header img").height();
        $(".header img").css("margin-top",Math.floor((headerHeight - imageHeight) / 2));
    });
</script>

answered Feb 19 '14 at 23:29

matt

2,312
5
34
57

1

It shouldn't be necessary to use jQuery in order to vertically align image. – Mike Feb 19 '14 at 23:34

score 1 · Answer 2 · edited May 23 '17 at 11:51

1

Already answered here: How to vertically align an image inside div

use an inline-block helper with height: 100% and vertical-align: middle on both elements.

display: inline-block;
height: 100%;
vertical-align:middle;

Example: http://jsfiddle.net/kizu/4RPFa/74/

edited May 23 '17 at 11:51

Community

1
1

answered Feb 19 '14 at 23:34

Nick Grealy

24,216
9
104
119

score 0 · Answer 3 · answered Feb 19 '14 at 23:42

0

use the CSS of:

#header {
    left:0;
    right:0;
    margin:auto;
}

answered Feb 19 '14 at 23:42

07lodgeT

108
9

How do you vertically align an image to the middle of a div?

3 Answers3