center align triangle along with text

Question

I am trying to use triangle (pure css) in my website for upvoting and downvoting. I have created triangles but am not able to align them along with the text where likes and dislikes are written.

This image shows how the triangles are showing up

I want them aligned with the text with minimal code.

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

Help me doing this with minimal added code. Any help, advice, suggestions are appreciated. Thanks!

I tried negative margin-top too. But didn't help.

score 5 · Accepted Answer · answered Jul 04 '13 at 15:09

5

Add display:inline-block to your .vote class, because <span> is an inline element by default.

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

answered Jul 04 '13 at 15:09

Nick R

7,704
2
22
32

great this works..i tried `display:inline;`, i never understood difference between the two. Can you please explain? – Optimus Prime Jul 04 '13 at 15:12
1

@optim - Have a read through this to explain the differences between `inline` and `inline-block`, I think it has probably been answered many time here : http://stackoverflow.com/questions/8969381/what-is-the-difference-between-display-inline-and-display-inline-block Hope that helps. – Nick R Jul 04 '13 at 15:13

score 1 · Answer 2 · answered Jul 04 '13 at 15:09

1

if I well understood, just add display: inline-block; to .vote

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

answered Jul 04 '13 at 15:09

Fabrizio Calderan

120,726
26
164
177

great this works..i tried `display:inline;`, i never understood difference between the two. Can you please explain? – Optimus Prime Jul 04 '13 at 15:11
1

[display inline vs. inline-block](http://stackoverflow.com/questions/9189810/css-display-inline-vs-inline-block) – Fabrizio Calderan Jul 04 '13 at 15:12

center align triangle along with text

2 Answers2