Adjust vertical position of different elements when display inline-block

Question

I have a bunch of img elements that I want to display in a line inside a div. So I did something like this

css:

#imageContainer {
            height: 90px;
            padding-left: 50px;
            padding-right: 50px;
            text-align: justify;
            text-justify: distribute-all-lines;
        }

                #imageContainer > img {
                    /*width: 150px;
                    height: 125px;*/
                    /*vertical-align: middle;*/
                    display: inline-block;
                    *display: inline;
                    zoom: 1;
                }

                #imageContainer:after {
                    content: '';
                    width: 100%;
                    display: inline-block;
                    font-size: 0;
                    line-height: 0;
                }
    html:
            <div id="imageContainer">
                <img class="imageOne" src="images/sample2.jpg" />
                <img class="imageTwo" src="images/sample.jpg" />
            </div>

This will make sure no matter how many img tag I put in the div it will be evenly distributed across the screen width. Now what I want to do is to be able to adjust vertical position of different elements. I tried to add padding in individual img tag but that will adjust the position of whole line. Is there a way to work around this?

JSFiddle: http://jsfiddle.net/g244H/

Update:

Found two solutions so far:

1. Don't use display inline block, use float and do something similar as Auto-growing margins when screen width get streched But this means implementing a bunch of code to get the auto margin adjustment

2. With a bit of hack I have this work around, surround a div to each of img element and have display inline-block applied to div instead of img. Then in each div I can applied margin-top to adjust the height. JSFiddle link above is updated

Answer 1

position: relative;
top: the-amount-that-you-want-it-to-move;

Relative will make it appear to the other elements as if it's still where it was without it, but it's visible part will be moved according to top, bottom, left, and right.

Answer 2

For the images that you would like to raise and or lower you could do a.

margin-top:1em; margin-bottom:-1em

Add overflow:visible to the #imageContainer.

Also add position:relative; When ever positioning elements they need a position set and so does their parent.

#imageContainer {
            position:relative;
            height: 90px;
            padding-left: 50px;
            padding-right: 50px;
            text-align: justify;
            text-justify: distribute-all-lines;
            overflow:visible
        }

     #imageContainer > img {
                position:relative;
                /*width: 150px;
                height: 125px;*/
                /*vertical-align: middle;*/
                display: inline-block;
                *display: inline;
                zoom: 1;
            }

The same amount you add you subtract for the opposite side.