CSS Forum

**lynnema** · 01-11-2007, 03:21 PM

I'm trying to vertically align some images that are sitting in a row:

http://www.jessweiss.com/mab/cha.html

I'd like the images that are shorter, (ie: row 2 pic 2 and row 3 pic 3) to align vertically, rather than at the top (IE) or at the bottom (Firefox). I tried placing a vertical-align tag in img, but it only seemed to help in Firefox, not IE.

Any thoughts? TIA!

**LadynRed** · 01-11-2007, 04:02 PM

Vertical align only works with TEXT.

I also noticed you are not closing your <img> tags correctly, there is no </img> end tag.

You really need to put a proper DOCTYPE on your pages if you expect to have any luck getting CSS to work properly.

CSS - there is no such thing as float:top. That "vspacer" div is unnecessary, use padding and margins to space out your lists.

Your #pics ul .. needs only to be #pics.. it's already defining a ul. However, given that you are re-using #pics.. it MUST be a CLASS rather than an ID. ID's must be unique, you cannot re-use them within a document.

**travelagent** · 01-11-2007, 04:15 PM

I agree with LadynRed about your present coding errors -- however, you can use this code to do what you're trying to accomplish ... this is strictly a "go-by" code, which you'll need to input your domain name and image names:

<style type="text/css">

img.baseline { vertical-align: baseline; }
img.sub { vertical-align: sub; }
img.super { vertical-align: super; }
img.top { vertical-align: top; }
img.texttop { vertical-align: text-top; }
img.middle { vertical-align: middle; }
img.bottom { vertical-align: bottom; }
img.textbottom { vertical-align: text-bottom; }
</style>

<title>Place Title Text Here</title></head>

<body><h1><p>Place Your Text Here</p></h1>

<b>vertical-align:baseline</b><img class="baseline" src="http://www.yoursite.com/images/image name.gif">
<b>vertical-align:sub</b><img class="sub" src="http://www.yoursite.com/images/image name.gif">
<b>vertical-align:super</b><img class="super" src="http://www.yoursite.com/images/image name.gif"><hr/>
<b>vertical-align:top</b><img class="top" src="http://www.yoursite.com/images/image name.gif">
<b>vertical-align:text-top</b><img class="texttop" src="http://www.yoursite.com/images/image name.gif">
<b>vertical-align:middle</b><img class="middle" src="http://www.yoursite.com/images/image name.gif"><hr/>
<b>vertical-align:bottom</b><img class="bottom" src="http://www.yoursite.com/images/image name.gif">
<b>vertical-align:textbottom</b><img class="textbottom" src="http://www.yoursite.com/images/image name.gif"></body></html>