中心对齐三角形和文本

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 Demo

<强> CSS

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

Answer 2

如果我完全理解，只需将display: inline-block;添加到.vote

即可

http://jsbin.com/ehamoj/1/