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。图像也需要它。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

put＆＃34; vertical-align：middle＆＃34;在图像上：

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

Answer 3

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

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

为什么veritcal-align：中间没有对齐表格行中的东西？

3 个答案: