title: CSS Icon vertical aligning
body: <p>I am trying to achieve the following alignments in css with minimal css elements:</p>
  
  <p>Middle:</p>
  
  <pre><code>==============================================================
  = [icon]                                                     =
  = [    ] Text                                                =
  = [    ]                                                     =
  ==============================================================
  </code></pre>
  
  <p>Bottom:</p>
  
  <pre><code>==============================================================
  = [icon]                                                     =
  = [    ]                                                     =
  = [    ] Text                                                =
  ==============================================================
  </code></pre>
  
  <p>Right Middle:</p>
  
  <pre><code>==============================================================
  =                                                     [    ] =
  =  Text                                               [    ] =
  =                                                     [    ] =
  ==============================================================
  </code></pre>
  
  <p>Right Bottom:</p>
  
  <pre><code>==============================================================
  =                                                     [    ] =
  =                                                     [    ] =
  =  Text                                               [    ] =
  ==============================================================
  </code></pre>
  
  <p>Middle is REALLY easy:</p>
  
  <p>Assume text line-height = 10px, icon height = 30px</p>
  
  <pre><code>&lt;div class="container"&gt;
      Text
  &lt;/div&gt;
  
  &lt;div class="container right"&gt;
      Text
  &lt;/div&gt;
  
  .container {
      line-height: 30px;
      background: url(...) no-repeat center left
      padding-left: 38px;
  }
  .container.right {
      line-height: 30px;
      background: url(...) no-repeat center right
      padding-right: 38px;
  }
  </code></pre>
  
  <p>The question is: How do I do the bottom alignment?</p>