I have found a lot of question on this argument but i was interested to know if there is a solution with out a div around the icon to act as a conteiner.
this is my start situation, use "vertical-align: middle;" didn’t work…
.role-div{
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
<div class="role-div">
<i class="fa-solid fa-arrow-up-long"></i>
MALE
<i class="fa-solid fa-arrows-rotate button" onclick="switch_names()"></i>
FEMALE
<i class="fa-solid fa-arrow-down-long"></i>
</div>
3
Answers
The correct solution is
vertical-align: middle;
… but which element did you apply it to? It needs to be on the<i>
elements.You need to center an element within another outer element, even if that outer element is the
<body>
itself.you can carry male and female text inside
<span></span>
and use line-height property of css as follows,and for html