html - 垂直对齐 CSS 中相邻的项目
问题描述
我在 div 中有 2 个图标和 1 个用作按钮的链接
.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>
这是codepen的链接https://codepen.io/hanzus/pen/GRrMbbm
当“注册”链接的 span 元素的字体大小为 16px 时,一切都居中,但是当我将其更改为例如 10px 时,链接会向下移动一点,并且它与带有 facebook 和 youtube 链接的其他 div 不在同一行.
当我更改 1 个元素的字体大小时,如何将这些链接放在同一行上?
解决方案
包裹在弹性中:
.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>