2

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.

Improve this question
0

3 Answers 3

Reset to default
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>
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

It shouldn't be necessary to use jQuery in order to vertically align image.
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/

Improve this answer

Comments

0

use the CSS of:

#header { left:0; right:0; margin:auto; }
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.