I am re-creating Instagram login page. My issue is I need to lineup Facebook icon with "Log in with Facebook" text.
I created a main container for this section, then wrapped both Facebook icon and Facebook text with divs as well. Then I applied flex to the main container. While the icon and Facebook text are on the same line (via align-items), the icon is still not lined up with the text. I tried looking into margins, paddings etc. I can't' seem to figure out what I screwed up. I used this similar approach in a different project I was doing and everything lined up perfectly.
Thank you very much, I have been at it for 3 hours now.
Here is a codepen with all the code:
https://codepen.io/Yukzor/pen/BaYGpLK
.fb a {
text-decoration: none;
font-size: 14px;
width: 100%;
text-align: center;
color: #385185;
font-weight: 600;
}
.facebook {
width: 20px;
height: 20px;
}
.facebookwhole {
display: flex;
justify-content: space-around;
align-items: center;
}<div class="facebookwhole">
<div class="fbpicture">
<img class="facebook" src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Flawyersandsettlements.com%2Fblog%2Fwp-content%2Fuploads%2F2015%2F09%2Ffacebook-logo.png&f=1&nofb=1">
</div>
<div class="fb">
<a href="www.facebook.com">Log in with Facebook</a>
</div>
</div>