title: Simple way to vertically align a nested div?
body: <p>I am trying to vertically align some rows of text within a parent div. Below is a simple example that should explain exactly what I want. It seems so simple, but after hours of searching I still can't find a way to do it! Thanks for any help you can provide.</p>
  
  <p><a href="http://jsfiddle.net/M9f2a/" rel="nofollow">JSFiddle</a></p>
  
  <pre><code>&lt;html&gt;
  &lt;header&gt;
  
  &lt;style type="text/css"&gt;
  .outer
  {
  }
  .inner1
  {
      float:left;
      width:80px;
      height:80px;
      background-image:url('http://www.google.com/favicon.ico');
      background-size:cover;
      background-repeat: no-repeat;
      background-position: 50% 50%;
  }
  .inner2
  {
      float:left;
      height:80px;
      padding-left:10px;
      vertical-align:middle;
  }
  .innerText
  {
  }
  &lt;/style&gt;
  
  &lt;/header&gt;
  &lt;body&gt;
  
  &lt;div class="outer"&gt;
      &lt;div class="inner1"&gt;&lt;/div&gt;
      &lt;div class="inner2"&gt;
          &lt;div class="innerText"&gt;This text&lt;/div&gt;
          &lt;div class="innerText"&gt;Should be centered&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>