问题与css三角形

Question

我正在尝试制作一些三角形，但它不像我想的那样工作，看看这个：

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

使用这个CSS：

.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;
}

结果如下：

正如您所看到的，当使用三角形时，它与文本不对齐，我想要它。

我该怎么办？

Answer 1

如何将vertical-align: middle;添加到三角形向上和三角形向下选择器中？

Answer 2

好的，你使用的标签不正确。因为你正在使用display:inline-flex我假设你不关心早期版本。 垂直对齐的最佳方法是 position:absolute; top:50%; transform:translateY(-50%);

查看此fiddle