треугольник выравнивания центра вместе с текстом

Question

Я пытаюсь использовать треугольник (чистый css) на своем веб-сайте для продвижения и 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/