Why is veritcal-align:middle not aligning things in my table row?

Question

I'm having trouble vertically aligning content in a table row. I have applied this style

vertical-align: middle;

to this table row

<table id="subscriptions-table">
    <tbody><tr>
        <th>Subscription</th>
        <th>Download</th>
    </tr>
    <tr class="even subscription-row header">
        <td class="ig-header-title ellipsis">
        <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">
        <a class="name ellipsis" href="/scenarios/18">Simulation #1</a>
    </td>  
    <td align="center"><a href="/scenarios/18/download"><img src="/assets/zip_icon-c2a0694959db12a0939d264d4283478c1f59a4b118df839d7020aca929a1df61.png" alt="Zip icon"></a></td>
    </tr> 
</tbody></table>

but the text is aligning to the bottom even though the image seems to be aligning in the middle -- https://jsfiddle.net/ny39f2qx/ . How do I make everythign vertically align in the middle?

Answer 1

Not enough vertical-align: middle. The image needs it too.

table {
  border-collapse: collapse;
}
table tbody tr:hover {
  background-color: #F6F8F9
}
.subscription-row img, .subscription-row .name {
  vertical-align: middle;
}
.subscription-row .name {
  color: #3d454c;
  font-size: 15px;
  font-size: .9375rem;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
  font-weight: bold;
}
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ig-header .ig-header-title {
  line-height: 20px;
}

<table id="subscriptions-table">
  <tbody>
    <tr>
      <th>Subscription</th>
      <th>Download</th>
    </tr>
    <tr class="even subscription-row header">
      <td class="ig-header-title ellipsis">
        <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">
        <a class="name ellipsis" href="/scenarios/18">Simulation #1</a>
      </td>
      <td align="center">
        <a href="/scenarios/18/download">
          <img src="/assets/zip_icon-c2a0694959db12a0939d264d4283478c1f59a4b118df839d7020aca929a1df61.png" alt="Zip icon">
        </a>
      </td>
    </tr>
  </tbody>
</table>