Question 88691 in Html Question posted in
Some basic documentation can be found here.

How to center vertically a fontawesome icon (css) – Html

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>
Tags:

3

Answers


  1. 0

    The correct solution is vertical-align: middle; … but which element did you apply it to? It needs to be on the <i> elements.

    i {
  font-size: 4em;
  vertical-align: middle;
}
    <link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<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>
    Login or Signup to reply.
  2. 0

    You need to center an element within another outer element, even if that outer element is the <body> itself.

    Login or Signup to reply.
  3. 0

    you can carry male and female text inside <span></span> and use line-height property of css as follows,

    .role-div,.role-div i,.role-div span{
  line-height: 16px;
}

    and for html

    <div class="role-div">
 <i class="fa-solid fa-arrow-up-long"></i>
 <span>MALE</span>
 <i class="fa-solid fa-arrows-rotate button" onclick="switch_names()"></i>
 <span>FEMALE</span>
 <i class="fa-solid fa-arrow-down-long"></i>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search