html - 表格单元格中的 Unicode 符号无法垂直对齐 CSS？

Question

每次我在一个表格单元格中有一个 unicode 符号时，

vertical-align: middle;

在我的 CSS 中停止工作。结果，文本比中间“漂浮得更高”。

请注意上行中的文本如何在中间垂直对齐，而下行中的 Sun Jun 4 23:52:31 2017 由于文件夹 unicode 符号而 float 得比中间高。

---

CSS相关部分

table, td, th {
    border: 2px solid #D0D0D0;
}

table {
    border-collapse: collapse;
}

td {
    vertical-align: bottom;
}

HTML的相关部分

<td><a href="foo" style="text-decoration: none">&#x1f4c2;&emsp;viz_coreOpt_3D</a><span style="float:right;">&emsp;&emsp;Sun Jun 4 23:52:31 2017</span></td>

Answer 1

文件夹图标是一行高度超过另一行的原因。我建议设置行高不要小于图标的高度。

table, td, th {
    border: 2px solid #D0D0D0;
}

table {
    border-collapse: collapse;
}

td {
  line-height: 1.5em;
    vertical-align: bottom;
}

<table>
  <tr>
    <td>
      <a href="foo" style="text-decoration: none">&#x1f4c2;&emsp;viz_coreOpt_3D</a>
      <span style="float:right;">&emsp;&emsp;Sun Jun 4 23:52:31 2017</span>
    </td>
  </tr>
</table>