CODEWITHSUNDEEP
htmlcssshapes
Optimus Prime
Optimus Prime

Reputation: 6907

center align triangle along with text

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.

Upvotes: 3

Views: 1605

Answers (2)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

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

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

Upvotes: 1

Nick R
Nick R

Reputation: 7784

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

Upvotes: 5

Related Questions