Vertical aligning items in CSS which are next to each other [duplicate] - html

Question

This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 1 year ago.
I have 2 icons in divs and 1 link which works as a button
.A {
width: 50px;
height: 50px;
border: 1px solid black;
display: inline-flex;
justify-content: center;
align-items: center;
margin: 5px;
}
a {
text-decoration: none;
}
.B {
width: 100px;
height: 50px;
}
/* when i change font-size for example to 10px then the element moves down a bit*/
.A span {
text-transform: uppercase;
color: black;
font-size: 10px;
}
<script src="https://kit.fontawesome.com/4254229804.js" crossorigin="anonymous"></script>
<a href="#">
<div class="A">
<i class="fab fa-facebook-f"></i>
</div>
</a>
<a href="#">
<div class="A">
<i class="fab fa-youtube"></i>
</div>
</a>
<a href="#">
<div class="A B">
<span>sign up</span>
</div>
</a>
here is a link to codepen https://codepen.io/hanzus/pen/GRrMbbm
Everything is centered when a font size of span element of "sign up" link is 16px, but when I change it for example to 10px then link moves a bit down and it is not on the same line with other divs with facebook and youtube links.
How do I get these links on the same line when I change a font-size of 1 element?

Answer 1

Wrap in flex:
.container {
display: flex;
}
<div class="container">
<a href="#">
<div class="A">
<i class="fab fa-facebook-f"></i>
</div>
</a>
<a href="#">
<div class="A">
<i class="fab fa-youtube"></i>
</div>
</a>
<a href="#">
<div class="A B">
<span>sign up</span>
</div>
</a>
</div>
Codepen

Answer 2

I know I am a bit a late to the party, but it is possible to make it simpler:
.container {
display: inline-flex;
width: 300px;
height: 50px;
}
.container a {
width: 33%;
margin: 5px;
border: 1px solid black;
display:inline-flex;
justify-content:center;
align-items:center;
font-size: 16px;
}
<div class="container">
<a href="#">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#">
<i class="fab fa-youtube"></i>
</a>
<a href="#">
<span>sign up</span>
</a>
</div>

Answer 3

You should only add "flex-direction: column;" for your CSS code.
.container{
display: flex;
flex-direction: column;
}
.A {
width:50px;
height: 50px;
border: 1px solid black;
display:inline-flex;
justify-content:center;
align-items:center;
margin: 5px;
}
a {
text-decoration:none;
}
.B {
width: 100px;
height: 50px;
}
.A span {
text-transform: uppercase;
color:black;
font-size: 10px;
}