title: Adjust vertical position of different elements when display inline-block
body: <p>I have a bunch of img elements that I want to display in a line inside a div. So I did something like this </p>
  
  <pre><code>css:
  
  #imageContainer {
              height: 90px;
              padding-left: 50px;
              padding-right: 50px;
              text-align: justify;
              text-justify: distribute-all-lines;
          }
  
                  #imageContainer &gt; 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:
              &lt;div id="imageContainer"&gt;
                  &lt;img class="imageOne" src="images/sample2.jpg" /&gt;
                  &lt;img class="imageTwo" src="images/sample.jpg" /&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>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?</p>
  
  <p>JSFiddle: <a href="http://jsfiddle.net/g244H/" rel="nofollow noreferrer">http://jsfiddle.net/g244H/</a></p>
  
  <p><strong>Update:</strong></p>
  
  <p>Found two solutions so far:</p>
  
  <ol>
  <li><p>Don't use display inline block, use float and do something similar as <a href="https://stackoverflow.com/questions/20195641/auto-growing-margins-when-screen-width-get-streched/20200738#20200738">Auto-growing margins when screen width get streched</a>
  But this means implementing a bunch of code to get the auto margin adjustment</p></li>
  <li><p>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 </p></li>
  </ol>