表格单元格中文本和图标之间的不对齐

Question

我有一个带有文字和图标的表格单元格：

.icon {
  float: right;
  margin-right: 5px;
}

<td class="table_cell">
  <span>
    Some text
    <i class="icon"></i>
  </span>
</td>

Chrome会将它们垂直对齐显示， Firefox显示左上角和右下角图标的文本。

我该如何解决这个问题，谢谢!!

Answer 1

您可以使用flexbox为表格单元格内容提供垂直居中。演示：

＆＃13;

＆＃13;

.table_cell > span {
  /* become a flex-container */
  /* all children will be flex-items including plain text */
  display: flex;
  /* vertically center items */
  align-items: center;
}

.icon {
  /* move icon to the right */
  margin-left: auto;
  margin-right: 5px;
]

＆＃13;

<td class="table_cell">
  <span>
    Some text
    <i class="icon"></i>
  </span>
</td>

＆＃13;

＆＃13;

＆＃13;