为什么 vertical-align:middle 不对齐我的 table 行中的内容？

Question

我在垂直对齐 table 行中的内容时遇到问题。我已经应用了这种风格

vertical-align: middle;

这table行

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

Answer 2

https://jsfiddle.net/ny39f2qx/3/

将"vertical-align: middle"放在图片上：

.subscription-row img {
  vertical-align: middle;
}

Answer 3

您可以考虑使用 flexbox 而不是垂直居中对齐。

table {
    border-collapse: collapse;
    display:flex;
    text-align: center;
    justify-content: center;
    align-items: center;
}

为什么 vertical-align:middle 不对齐我的 table 行中的内容？

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

html

css

vertical-alignment