title: How to vertically align an image inside a div
body: <p>How can you align an image inside of a containing <code>div</code>?</p>
  <h2>Example</h2>
  <p>In my example, I need to vertically center the <code>&lt;img&gt;</code> in the <code>&lt;div&gt;</code> with <code>class =&quot;frame</code>&quot;:</p>
  <pre><code>&lt;div class=&quot;frame&quot; style=&quot;height: 25px;&quot;&gt;
      &lt;img src=&quot;http://jsfiddle.net/img/logo.png&quot; /&gt;
  &lt;/div&gt;
  </code></pre>
  <p><code>.frame</code>'s height is fixed and the image's height is unknown. I can add new elements in <code>.frame</code> if that's the only solution. I'm trying to do this on Internet  Explorer 7  and later, WebKit, Gecko.</p>
  <p>See the jsfiddle <a href="http://jsfiddle.net/4RPFa/61/" rel="noreferrer">here</a>.</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>.frame {
      height: 25px;      /* Equals maximum image height */
      line-height: 25px;
      width: 160px;
      border: 1px solid red;
  
      text-align: center;
      margin: 1em 0;
  }
  img {
      background: #3A6F9A;
      vertical-align: middle;
      max-height: 25px;
      max-width: 160px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class=frame&gt;
     &lt;img src="http://jsfiddle.net/img/logo.png" height=250 /&gt;
  &lt;/div&gt;
  &lt;div class=frame&gt;
     &lt;img src="http://jsfiddle.net/img/logo.png" height=25 /&gt;
  &lt;/div&gt;
  &lt;div class=frame&gt;
     &lt;img src="http://jsfiddle.net/img/logo.png" height=23 /&gt;
  &lt;/div&gt;
  &lt;div class=frame&gt;
     &lt;img src="http://jsfiddle.net/img/logo.png" height=21 /&gt;
  &lt;/div&gt;
  &lt;div class=frame&gt;
     &lt;img src="http://jsfiddle.net/img/logo.png" height=19 /&gt;
  &lt;/div&gt;
  &lt;div class=frame&gt;
      &lt;img src="http://jsfiddle.net/img/logo.png" height=17 /&gt;
  &lt;/div&gt;
  &lt;div class=frame&gt;
      &lt;img src="http://jsfiddle.net/img/logo.png" height=15 /&gt;
   &lt;/div&gt;
  &lt;div class=frame&gt;
      &lt;img src="http://jsfiddle.net/img/logo.png" height=13 /&gt;
   &lt;/div&gt;
  &lt;div class=frame&gt;
      &lt;img src="http://jsfiddle.net/img/logo.png" height=11 /&gt;
   &lt;/div&gt;
  &lt;div class=frame&gt;
      &lt;img src="http://jsfiddle.net/img/logo.png" height=9 /&gt;
   &lt;/div&gt;
  &lt;div class=frame&gt;
      &lt;img src="http://jsfiddle.net/img/logo.png" height=7 /&gt;
   &lt;/div&gt;
  &lt;div class=frame&gt;
      &lt;img src="http://jsfiddle.net/img/logo.png" height=5 /&gt;
   &lt;/div&gt;
  &lt;div class=frame&gt;
      &lt;img src="http://jsfiddle.net/img/logo.png" height=3 /&gt;
   &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>