title: How can I align inline div elements vertically in IE7?
body: <p>I am loading HTML page in MMC snapin. It use IE7. How to vertically align elements a and img inside div tag with style <code>display:inline</code>? The div element has certain height. Since I am using older IE version(IE7) it is not supporting display:flex;</p>
  <p>If I use line-height, text is displaying vertically aligned but elements a and img inside div element is not vertically aligned. My divs should be inlined. Please help me.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.Parent {
    width: 700px;
    Height: 50px;
    background-color: red;
  }
  
  .child1 {
    width: 200px;
    display: inline;
    text-align: center;
    line-height: 30px;
    height: 30px;
    vertical-align: middle;
    background-color: green;
    border-right: 1px solid yellow;
  }
  
  .child2 {
    width: 200px;
    display: inline;
    text-align: center;
    line-height: 30px;
    height: 30px;
    background-color: green;
    border-right: 1px solid yellow;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="Parent"&gt;
    &lt;div class="child1"&gt;
      &lt;a href="" style="padding-left: 5px;padding-right: 5px;"&gt;&lt;img height="12" src="img1.png" width="12" id="ImageBeginning" alt="Text"&gt;&lt;/a&gt;
      &lt;a href="" style="padding-left: 5px;padding-right: 5px;"&gt;&lt;img height="12" src="img2.png" width="12" id="ImageLeft" alt="Text"&gt;&lt;/a&gt;
      &lt;a href="" style="padding-left: 5px;padding-right: 5px;"&gt;&lt;img height="12" src="img3.png" width="12" id="ImageRight" alt="Text"&gt;&lt;/a&gt;
      &lt;a href="" style="padding-left: 5px;padding-right: 5px;"&gt;&lt;img height="12" src="img4.png" width="12" id="ImageEnd" alt="Text"&gt;&lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="child2"&gt;Dynamic Text&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>