Undocumented Image Control Properties

For over a week, I've been struggling to make an image gallery similar to the one here. The problem I was having is that the images were all different sizes, and when they were displayed on the screen they were jumping all over the screen. Let me go back to the beginning...

It seems that the Image control doesn't scale properly unless you set its size as a percentage of the container size. So, if you leave the size off to let the image size itself, you get a giant image with scrollbars, regardless of whether you've set scaleContent to true or not. So, when you set the image size as a percentage of the container size, the image control probably won't have the same dimensions as the image, which means that the image is "floating" inside the container. By default, the image is supposed to be in the top left of the image control, but my experience is that it can wind up pretty much anywhere in the control.

I scoured the documentation and even asked on FlexCoders, but no one could tell me a fix for this problem. Finally, in desperation, I went back to the example, and found this text nestled in the image tag's properties:

verticalAlign="bottom" horizontalAlign="center"

Grrr... I hope this saves someone else from over a week of fruitless frustration!

Update 7/3/2008: I ultimately learned that if I want to affect any visual property of a component, that I needed to look at both properties and styles. These two "properties" are, in fact, documented--styles.