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

Question

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

为什么 css 和 inline-style 语句都不起作用？

以下是我尝试过的代码：

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

您可以考虑为表格单元格使用弹性框。

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>

Answer 2

为它们中的每一个制作不同的 < td > 它将以正确的方式对齐。检查以下代码：

//链接是添加素材图标（CDN for material Icon）你已经添加了这个

 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">


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

Answer 3

方法1：

PS：@Gerard 的答案很受欢迎，因为它遵循 flexbox，这是一种很好的元素对齐技术，而且答案不会修改标记，因为它在方法 2 中略有修改。

方法二：

• 对 html 标记进行了轻微更改，
  - 将标签包裹在Copies:内部span。
• 浮动每个元素，并用于line-height调整元素。

td {
    height: 20px;
}

td > * {
    float: left;
    display: inline-block;
    height: 100%;
    line-height: 20px;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<table>
  <tr>
    <td valign="bottom">
      <span>Copies:</span>
      <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>

Answer 4

在下面添加css，你就完成了......

tr>td {
    display:table;
}
tr>td>i {
    display:table-cell;
    vertical-align: bottom;
}