Issue
.btnup, .btndown{
display:inline-block;
font-size:20px;
background:#ddd;
border-radius:5px;
cursor:pointer;
width:25px;
line-height:30px;
height:30px;
color:#999;
text-align:center;
margin:0 5px;
}
<link href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet"/>
<i class="fas fa-angle-up btnup" id='btnup'></i>
<i class="fas fa-angle-down btndown" id='btndown'></i>
How to place the arrows on center vertically ?
Solution
You can add top and bottom padding (and subtract those values from the height
setting):
.btnup, .btndown{
display:inline-block;
font-size:20px;
background:#ddd;
border-radius:5px;
cursor:pointer;
width:25px;
line-height:30px;
height:20px;
color:#999;
text-align:center;
margin:0 5px;
padding: 5px 0 5px 0;
}
<link href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet"/>
<i class="fas fa-angle-up btnup" id='btnup'></i>
<i class="fas fa-angle-down btndown" id='btndown'></i>
Answered By - Johannes Answer Checked By - Marilyn (PHPFixing Volunteer)
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.