html - 如何在表格单元格的垂直中心对齐 CSS 箭头？

Question

我在表格单元格中有一个 CSS 箭头和一些文本 ...

<td><div class="arrow-up"></div> + 1492.46</td>

如何让箭头与文本的左侧对齐，同时也与单元格的垂直中心对齐？我在箭头上尝试了以下样式 ...

.arrow-up {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid black;
  vertical-align: middle;
}

但箭头仍然在文本上方对齐 -- https://jsfiddle.net/s8e5k3st/ .任何有关获得正确对齐的建议都将受到赞赏。

Answer 1

只需将 display:inline-block; 添加到 arrow-up 类即可。

.arrow-up {
  display:inline-block; /* <-- this */
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid black;
  vertical-align: middle;
}

Edited JSFiddle