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

【问题标题】：How do I align a CSS arrow at the vertical center of my table cell?如何在表格单元格的垂直中心对齐 CSS 箭头？
【发布时间】：2018-02-13 22:50:22
【问题描述】：

我在表格单元格中有一个 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/ 。任何获得正确对齐的建议都值得赞赏。

【问题讨论】：

标签： html css html-table alignment vertical-alignment

【解决方案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

【讨论】：

【解决方案2】：

只是想给你一个替代解决方案，使用 Font Awesome

<i class="fa fa-caret-up fa-lg" aria-hidden="true"></i>

#currencyTable {
  display: inline;
  width: 80%;
  margin: 0 auto;
  background-color: #ffffff;
  border: 1px solid #C7CDD1;
}

.currency-row img,
.currency-row .name {
  vertical-align: middle;
}

.currency-row {
  min-height: 30px;
  border-bottom: 1px solid #C7CDD1;
}

.currency-row img,
.currency-row .name {
  vertical-align: middle;
}

.currency-row td {
  padding: 12px 0 12px 0;
}

.currency-row td:first-child {
  padding-left: 10px;
}

.currency-row td:last-child {
  padding-right: 10px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div id="currencyTable">
  <table width="100%">
    <tr>
      <th>Currency</th>
      <th>Price</th>
      <th>1d Change</th>
      <th>1w Change</th>
      <th>1y Change</th>
      <th>% Index Market Cap</th>
    </tr>
    <tr class="even currency-row">
      <td>Bitcoin</td>
      <td>2727.74 USD</td>
      <td><i class="fa fa-caret-up fa-lg" aria-hidden="true"></i> + 1492.46</td>
      <td></td>
      <td></td>
      <td><i class="fa fa-caret-down fa-lg" aria-hidden="true"></i> 53.89 %</td>
    </tr>
  </table>
</div>

【讨论】：