中心对齐三角形和文本

Question

我试图在我的网站上使用三角形(纯css)进行upvoting和downvoting.我已经创建了三角形但是无法将它们与喜欢和不喜欢的文本对齐.

我希望它们与最小代码的文本对齐.

的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>

用最少的添加代码帮助我做到这一点.任何帮助,建议,建议表示赞赏.谢谢!

我也尝试了负利润率.但没有帮助.

Answer 1

添加display:inline-block到您的.vote类,因为默认情况下<span>是一个inline元素.

JSFiddle演示

CSS

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