css三角形的问题

我正试着做一些三角形，但它没有像我想的那样工作，看看这个：

<th><a href="#">Rent</a> <div class="triangle-up"></div></th>

结果是：

正如您所看到的，当使用三角形向上时，它与文本不对齐，这是我希望它对齐的

---

我能做什么？

添加

垂直对齐：中间到三角形向上和三角形向下选择器？
确定您正在使用的标签不正确。由于您使用的是
display:inline flex
，我假设您不关心早期的ie版本。
垂直对齐的最好方法是
位置：绝对位置；最高：50%；转化：translateY（-50%）

看看这个

.triangle-down {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 6px 0 6px;
    border-color: #FFF transparent transparent transparent;
    display: inline-flex;
}

.triangle-up {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 6px 5px 6px;
    border-color: transparent transparent #FFF transparent;
    display: inline-flex;
}

th {
    text-align: left;
    text-shadow: -1px -1px #000000;
    background-image: -webkit-linear-gradient(top, #222222, #161717);
    height: 20px;
    padding: 7px;
}