Vertical-alignment of Images in a DIV - HTML Forums

rockmorg · 03-24-2006, 07:35 PM

Hey all,

I'm revamping my company's site and doing it in several divs instead of a table layout. So far, things are going quite a bit better than tables. One thing that has been a problem for me is vertical alignment inside my divs. Right now I'm using the padding-top to push the image down and appear to be in the middle, but that will not be good for multiple images.

So, here is the code:

Code:

div.left
{
 padding-top:100px;
 position:relative;
 height:200px;
 float:left;
 width:200px;
 clear:both
}

I have an image in this div that I would like to place in the middle, so I put an inline style on the image:

HTML Code:

<img src="BNCinstall.jpg" alt="BNC installation" style="vertical-align:middle;"/>

And nothing happens... I can use text-align to center the image or move it right or left, but nothing with the vertical-align. Perhaps I need an entirely different method than even vertical-align because on a couple column-like divs I would like to put 3-4 images at different heights.

Anyone have any ideas? Thanks much!
-
Rockmorg

Kravvitz · 03-24-2006, 10:53 PM

Quote:

This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element. The following values only have meaning with respect to a parent inline-level element, or to a parent block-level element, if that element generates anonymous inline boxes; they have no effect if no such parent exists.

Note. Values of this property have slightly different meanings in the context of tables. Please consult the section on table height algorithms for details.

http://www.w3.org/TR/REC-CSS2/visude...vertical-align

If the only thing in those <div>s is one <img> (not including white-space characters), then setting the line-height to the same as the height in conjunction with vertical-align:middle will work.

rockmorg · 03-25-2006, 11:47 AM

Hmmm... well I appreciate the feedback and info, but it doesn't seem to address much more than that - so now I know that you pretty much can't use vertical-align for an image in a div unless it is an inline element or there is text or something?

I'm sure this isn't the first time people have wanted images vertically aligned down the center of a div?? There isn't much else out there that rings out vertical alignment to me... anyone else?

Thanks again,
-
Rockmorg

_Aerospace_Eng_ · 03-25-2006, 12:27 PM

Kravvitz already gave you a solution. If the image is the ONLY thing in the div then you can set the line height to the height of the div and it will align vertically.

Code:

div.left
{
 padding-top:100px;
 position:relative;
 height:200px;
 float:left;
 width:200px;
 clear:both;
 line-height:200px;
}

Edit:

If you are using more than one image then you can do something like this

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style type="text/css">
.left {
width:200px;
height:500px;
position:relative;
border:1px solid #000;
margin:auto;
}
.theimgs { /*height of images is 300px and width of images is 100px*/
width:100px;
height:300px;
position:absolute;
top:50%;
left:50%;
margin-top:-150px; /* this is half the height of the images */
margin-left:-50px; /* this is half the width of the images */
background:#F00; /* used for testing purposes because I have no images to use */
}
</style>
</head>

<body>
<div class="left">
	<div class="theimgs"></div>
</div>
</body>
</html>

You will need to know the width and height of the images for the above solution to work.

coothead · 03-25-2006, 12:43 PM

Hi there rockmorg,

here is a simple example of vertical alignment for images...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>vertical alignment</title>
<base href="http://coothead.homestead.com/files/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
<!--
body {
    background-color:#999;
 }
div {
    width:300px;
    height:500px;
    border:1px solid #000;
    background-color:#666;
    margin:auto;
 }

img {
    display:block;
    border:2px solid #000;
    margin:46px auto;
 }
-->
</style>

</head>
<body>

<div>

<img src="anim.gif" alt="">
<img src="anim1.gif" alt="">
<img src="anim2.gif" alt="">

</div>

</body>
</html>