html - 中央揃えの三角形とテキスト

Question

賛成票と反対票を投じるために、Web サイトで三角形 (純粋な css) を使用しようとしています。三角形を作成しましたが、好き嫌いが書かれているテキストに合わせて配置できません。

最小限のコードでテキストに合わせて配置したい。

.css

.vote{
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    cursor: pointer;
    vertical-align: middle;
}

.upvote{
    border-bottom: 10px solid #7d7d7d;
}
.downvote{
    border-top: 10px solid #7d7d7d;
}

.upvoted{
    border-bottom: 10px solid teal;
}
.downvoted{
    border-top: 10px solid #ab102f;
}

.html

<span id='votings'><span class='vote upvoted'></span>
<?php echo $current['likes'];?>
<span class='vote downvote'></span>
<?php echo $current['dislikes'];?>
<?php echo $current['action'];?>
</span>

最小限の追加コードでこれを行うのを手伝ってください。ヘルプ、アドバイス、提案をいただければ幸いです。ありがとう！

私もネガティブマージントップを試しました。しかし、助けにはなりませんでした。