html - 为什么垂直对齐是:middle not aligning things in my table row?

Question

我在垂直对齐表格行中的内容时遇到问题。我应用了这个样式

vertical-align: middle;

到这个表格行

<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>

但文本与底部对齐，即使图像似乎在中间对齐 -- https://jsfiddle.net/ny39f2qx/ .如何使所有内容在中间垂直对齐？

Answer 1

vertical-align: middle 不够。图片也需要它。

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>