Home>

I want to place the Instagram icon in the center of the top and bottom, just like the Twitter icon.
I would appreciate it if you could teach me how to solve it. Thanks for your cooperation.

When css is not applied, the Instagram icon is aligned vertically and centered like the Twitter icon, but if you decorate the Instagram icon with css, the position will shift slightly upward and the top and bottom center. It will not be aligned.

Corresponding source code
<!-SNS container->
        
            
               <i></i>
                
                  <span>
                      <i></i>
                  </span>
                
            
        
   <!-End of SNS container->
.insta_btn {
  display: inline-block;
  text-align: center;/* center alignment * /
  color: # 2e6ca5;/* Text color * /
  font-size: 17px;/* Font size * /
  text-decoration: none;/* Remove underline * /
  margin-top: -6pt;
}
.insta_btn: hover {/ * When hovering * /
  color: # 668ad8;/* Text color * /
  transition: .5s;/* Slow change * /
}
.insta_btn .insta {/ * Icon background * /
  position: relative;/* relative placement * /
  display: inline-block;
  width: 50px;/* width * /
  height: 50px;/* height * /
  background: -webkit-linear-gradient (135deg, # 427eff 0%, # f13f79 70%) no-repeat;
  background: linear-gradient (135deg, # 427eff 0%, # f13f79 70%) no-repeat;/* Gradient ① * /
  overflow: hidden;/* Hide the overflowing part * /
  border-radius: 13px;/* Rounded corners * /
}
.insta_btn .insta: before {/ * To overlay gradation * /
  content:'';
  position: absolute;/* absolute configuration * /
  top: 23px;/* Shift * /
  left: -18px;/* shift * /
  width: 60px;/* Width of gradient cover * /
  height: 60px;/* Height of gradient cover * /
  background: -webkit-radial-gradient (# ffdb2c 10%, rgba (255, 105, 34, 0.65) 55%, rgba (255, 88, 96, 0) 70%);
  background: radial-gradient (# ffdb2c 10%, rgba (255, 105, 34, 0.65) 55%, rgba (255, 88, 96, 0) 70%);/* Gradient ② * /
}
.insta_btn .fa-instagram {/ * icon * /
  color: #FFF;/* on white * /
  position: relative;/* to use z-index * /
  z-index: 2;/* Before gradient * /
  font-size: 40px;/* Icon size * /
  line-height: 50px;/* Match with height * /
}
What I tried

I applied bootstrap's location utility etc. on html, but it didn't work.
Also, I thought that the position: relative;part of the icon background of css was a problem, so I tried absolute and other things, but I could not arrange it well due to a large deviation.

  • Answer # 1

    .fa-twitter-square {
    position: relative;
    top: 10px;
    }

    Specify the icon
    By changing the position, I was able to display it safely without any deviation from the Instagram icon.
    However, when two icons are displayed, they are aligned vertically, but when either one is displayed, it will be off center, so
    We couldn't solve the problem fundamentally, so we abandoned this implementation.
    However, if you want to align both icons, the above code will be solved, so this is the solution.

    Thank you to everyone who responded.

  • Answer # 2

    card-bodyAgainst

    .card-body {
      display: flex;
      align-items: center;
    }


    How about adapting?