title: how can I align to middle by height
body: <p>I want to create image box(with image).<br>
  It's ugly when text is in the top of box.</p>
  
  <p>How can I align text to middle?<br>
  I tried to use <code>vertical-align</code>, but it seems, that it don't works</p>
  
  <p><a href="http://jsfiddle.net/DhHnZ/" rel="noreferrer">Demo of my code</a></p>
  
  <p><strong>EDIT:</strong><br>
  Your solution works fine with short messages.<br>
  But if they will be multi-lined, it is ugly again.<br>
  Is it possible to not increase size of line If we don't need it?</p>
  
  <p><img src="https://i.stack.imgur.com/Z6lkS.png" alt="enter image description here"></p>