html - 谷歌图标垂直对齐不起作用

Question

我正在尝试将“减号”和“加号”对齐到底部。但是，css 和内联样式都不起作用。通过选择内容，图标底部没有多余的空白。

为什么 css 和内联样式语句都不起作用？

下面是我试过的代码:

HTML

<tr>
  <td style="vertical-align: text-bottom;">
    Copies:
    <i class="material-icons icons">&#xE15D;</i>
    <input type="text" id="myNumber" size="1px" value="1" />
    <i class="material-icons">&#xE3BA;</i>
  </td>
</tr>

CSS 选项 1

material-icons.icons {
  vertical-align: text-bottom;
}

CSS 选项 2

material-icons.icons {
  position: absolute;
  bottom: 0;
  right: 0;
}

Answer 1

您可以考虑使用 flexbox对于表格单元格。

td {
  display: flex;
  align-items: flex-end; /* Vertical alignment at the bottom */
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<table>
  <tr>
    <td>
      Copies:
      <i class="material-icons icons">&#xE15D;</i>
      <input type="text" id="myNumber" size="1px" value="1" />
      <i class="material-icons">&#xE3BA;</i>
    </td>
  </tr>
</table>