title: CSS Vertical align text to the middle of image
body: <blockquote>
    <p><strong>Possible Duplicate:</strong><br>
    <a href="https://stackoverflow.com/questions/489340/how-do-i-vertically-align-text-next-to-an-image-with-css">How do I vertically align text next to an image with CSS?</a>  </p>
  </blockquote>
  
  
  
  <p>I have difficulties to center spans <code>vertically middle</code> in div.</p>
  
  <p>This simple code: <a href="http://jsfiddle.net/4hDTb/" rel="noreferrer">http://jsfiddle.net/4hDTb/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="bar"&gt;
      &lt;span&gt;Simple text&lt;/span&gt;
      &lt;img src="" class="img1" /&gt;
      &lt;span&gt;Another text&lt;/span&gt;
      &lt;img src="" class="img2" /&gt;
  &lt;/div&gt;​
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.bar
  {
      width: 100%;
      height: 50px;
      border: 1px black solid;
  }
  .img1
  {
      width: 100px;
      height: 50px;
      border: 1px black solid;
  }
  
  .img2
  {
      width: 200px;
      height: 50px;
      border: 1px black solid;
  
  }
  </code></pre>
  
  <p>How to center <code>&lt;span&gt;s</code> in <code>div.bar</code> vertically middle?</p>
  
  <p>​</p>