title: Vertically Align a Span within a TD
body: <p>I am running into some troubles with CSS formatting of table columns with bootstrap. A normal <code>td</code> looks like this:</p>
  
  <pre><code>&lt;td style="vertical-align: middle; font-size: 10px;"&gt;
  &lt;span class="edit-icon glyphicon glyphicon-pencil" style="vertical-align: top !important;"&gt;&lt;/span&gt;
  Content
  &lt;/td&gt;
  </code></pre>
  
  <p>With the <code>edit-icon</code> class looking like:</p>
  
  <pre><code>.edit-icon {
      float: right;
      padding-top: 3px;
      padding-right: 3px;
  }
  </code></pre>
  
  <p>Ideally, the content in the cell should be centered vertically and the icon should be in the top right corner. I've tried for hours, but to no avail, to figure out how to align one element to the middle vertically and one element to the top vertically in the same cell.</p>
  
  <p>To help further display the problem, here is the current look:</p>
  
  <p><img src="https://i.stack.imgur.com/TXl7g.png" alt="Bad Version"></p>
  
  <p>Here is what I'm looking for:</p>
  
  <p><img src="https://i.stack.imgur.com/fBKc5.jpg" alt="Desired Version"></p>
  
  <p>Any help with how to solve this CSS conundrum would be greatly appreciated!</p>