title: Why is veritcal-align:middle not aligning things in my table row?
body: <p>I'm having trouble vertically aligning content in a table row.  I have applied this style</p>
  
  <pre><code>vertical-align: middle;
  </code></pre>
  
  <p>to this table row</p>
  
  <pre><code>&lt;table id="subscriptions-table"&gt;
      &lt;tbody&gt;&lt;tr&gt;
          &lt;th&gt;Subscription&lt;/th&gt;
          &lt;th&gt;Download&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr class="even subscription-row header"&gt;
          &lt;td class="ig-header-title ellipsis"&gt;
          &lt;img src="http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons/matte-grey-square-icons-alphanumeric/118474-matte-grey-square-icon-alphanumeric-letter-s.png" height="25" alt="S icon"&gt;
          &lt;a class="name ellipsis" href="/scenarios/18"&gt;Simulation #1&lt;/a&gt;
      &lt;/td&gt;  
      &lt;td align="center"&gt;&lt;a href="/scenarios/18/download"&gt;&lt;img src="/assets/zip_icon-c2a0694959db12a0939d264d4283478c1f59a4b118df839d7020aca929a1df61.png" alt="Zip icon"&gt;&lt;/a&gt;&lt;/td&gt;
      &lt;/tr&gt; 
  &lt;/tbody&gt;&lt;/table&gt;
  </code></pre>
  
  <p>but the text is aligning to the bottom even though the image seems to be aligning in the middle -- <a href="https://jsfiddle.net/ny39f2qx/" rel="nofollow noreferrer">https://jsfiddle.net/ny39f2qx/</a> .  How do I make everythign vertically align in the middle?</p>