Issue
I have a CSS arrow and some text in a table cell ...
<td><div class="arrow-up"></div> + 1492.46</td>
How do I get the arrow to align to the left of the text and also in the vertical center of the cell? I have tried the below styling on the arrow ...
.arrow-up {
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid black;
vertical-align: middle;
}
but the arrow is still aligning above the text -- https://jsfiddle.net/s8e5k3st/ . Any suggestions for getting the proper alignment are appreciated.
Solution
Simply add display:inline-block;
to arrow-up
class.
.arrow-up {
display:inline-block; /* <-- this */
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid black;
vertical-align: middle;
}
Answered By - Baro Answer Checked By - David Goodson (PHPFixing Volunteer)
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.