How to vertically center an image in a div

  • Thread starter Thread starter AAaron123
  • Start date Start date
A

AAaron123

I know this is long but by the looks of the Internet I'm not alone in trying
to understand how to vertically center an image in a div.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

</head>

<body>

<div style="height:300px;border:solid 1px red;line-height:300px"><img
style="vertical-align:middle;"
src="http://groups.google.se/intl/en/images/logos/groups_logo.gif" alt=''
/></div>


<div style="height:300px;border:solid 1px red;line-height:300px">

<img style="vertical-align:middle;"
src="http://groups.google.se/intl/en/images/logos/groups_logo.gif" alt='' />

</div>


</body>

</html>


The first div shows the figured not centered - it shows at the top of the
div.
That complete statement is on one line.

The second div is a direct copy with a couple of cr's inserted.
It works fine.

Do you know how come?
What is wrong with the first one (the charachers are identical)?



Some questions developed as I worked on this in IE8:

1)In a simple setup if there is a div containing only an image, the div's
size will be the size of the image. Right?

2)If I set the size of a div with a border, is the size I set the inside-of
the-border size? Or what?

3)Align* on a div generally aligns the contents but align* on an img aligns
the image within it's container Right?

4In this case they should be effectively the same?

5)Can you comment on the following?
In the one that works if the vertical-align is moved to the div (no style on
the img) it nolonger works.

With vertical-align back on the img, if I add text-align:center to the img
it does not h-center. but if I add it to the div it does.



Thanks in advance for any enlightenment
 
I know this is long but by the looks of the Internet I'm not alone in trying
to understand how to vertically center an image in a div.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

</head>

<body>

<div style="height:300px;border:solid 1px red;line-height:300px"><img
style="vertical-align:middle;"
src="http://groups.google.se/intl/en/images/logos/groups_logo.gif" alt=''
/></div>

<div style="height:300px;border:solid 1px red;line-height:300px">

<img style="vertical-align:middle;"
src="http://groups.google.se/intl/en/images/logos/groups_logo.gif" alt='' />

</div>

</body>

</html>

The first div shows the figured not centered - it shows at the top of the
div.
That complete statement is on one line.

The second div is a direct copy with a couple of cr's inserted.
It works fine.

Do you know how come?
What is wrong with the first one (the charachers are identical)?

Some questions developed as I worked on this in IE8:

1)In a simple setup if there is a div containing only an image, the div's
size will be the size of the image. Right?

2)If I set the size of a div with a border, is the size I set the inside-of
the-border size? Or what?

3)Align* on a div generally aligns the contents  but align* on an img aligns
the image within it's container Right?

4In this case they should be effectively the same?

5)Can you comment on the following?
In the one that works if the vertical-align is moved to the div (no styleon
the img) it nolonger works.

With vertical-align back on the img, if I add text-align:center to the img
it does not h-center. but if I add it to the div it does.

Thanks in advance for any enlightenment
Click to expand...

Hi

The vertical-align property is for text within the space of a single
line. It doesn't work images in div elements.

To control positioning of an img within a div element it is better to
use CSS positioning for block elements.

If you can specify the actual size and position you require in pixels
then it is comparatively easy. For example:

<div style="position:relative; height:300px; width:300px">
<div style="position:absolute; top:100px; left:100px;">
<img src="..." alt="..." width="100" height="100" />
</div>
</div>

Will put the 100 x 100 pixel image right in the middle of the outer
div element.

HTH
 
Back
Top