中心对齐三角形文字

我想在我的网站中使用三角形（纯CSS）upvoting和downvoting。我已经创建了三角形，但无法将它们与写入喜好和不喜欢的文字一起对齐。中心对齐三角形文字

This image shows how the triangles are showing up

我希望他们用最少的代码文本对齐。

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

帮我用最少的添加的代码做这个。任何帮助，建议，建议表示赞赏。谢谢！

我也试过负边缘。但没有帮助。

来源

2013-07-04 Optimus Prime

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

来源

2013-07-04 15:09:14

伟大这个works..i试图'显示：内联;' ，我从未理解这两者之间的区别。你能解释一下吗？ –

@optim - 通过阅读这个来解释'inline'和'inline-block'之间的区别，我认为它可能在很多时候在这里回答：http://stackoverflow.com/questions/8969381/what-is -in-display-inline-and-display-inline-block希望有帮助。 –

，如果我很好理解的，只是增加display: inline-block;到.vote

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

来源

2013-07-04 15:09:25 fcalderan

伟大的这个作品..我尝试'显示：内联;'，我从来没有理解两者之间的差异。你能解释一下吗？ –

[display inline vs. inline-block]（http://stackoverflow.com/questions/9189810/css-display-inline-vs-inline-block） – fcalderan

非常感谢。对不起，我不能接受多个答案:( –

中心对齐三角形文字

回答

相关问题