title: css img vertical-align to middle does not work. What's wrong?
body: <pre><code>// My HTML CODE HERE
  &lt;div id="main"&gt;
      &lt;div id="wrap"&gt;
          &lt;div class="header"&gt;
              &lt;span class="img_frame"&gt;
                  &lt;img src="http://phone.pe.hu/main_logo_white.png"&gt;
              &lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  // My css CODE HERE
  #wrap .header {
      position:relative;
      background-color: rgba(35, 81, 112, 0.9);
      opacity: 0.8;
      width:598px;
      height:72px;
      float:left;
      text-align: center;
      display: block;    
  }
  
  #wrap .header .img_frame {
      display: inline-block;
      vertical-align: middle;
      height: 100%;
  }
  
  #wrap .header .img_frame img {
      display: inline-block;
      width: 182px;
      vertical-align: middle;
  } 
  </code></pre>
  
  <p>I tried to align the img tag into middle in span box which is defined inline-block display, but it doesn't work.
  (This method is referring to this answer : <a href="https://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-div">How to vertically align an image inside div</a>)</p>
  
  <p>the result can be seen here : 
  <a href="https://jsfiddle.net/MaggiePhalk/Lmn8jaLe/2/" rel="nofollow noreferrer">https://jsfiddle.net/MaggiePhalk/Lmn8jaLe/2/</a></p>
  
  <p>What should be corrected? plz.</p>