我试图将 FontAwesome 图标置于圆形按钮的中心,但我无法让它工作(该图标一直出现在圆圈上方,如图所示
我的HTML如下:
<div class="socials">
<div class="socialbuttons">
<a class="fa-brands fa-instagram" href="https://instagram.com" target="_blank"></a>
<a class="fa-brands fa-github" href="https://instagram.com" target="_blank"></a>
</div>
</div>
还有我的CSS:
.socialbuttons{
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.fa-brands{
text-decoration: none !important;
color: white !important;
background: #1a1a1a;
width: 40px;
height: 40px;
flex-direction: column;
display: inline-block;
justify-content: center;
align-items: center;
border-radius: 100%;
margin: 5px;
}
如有任何帮助,我们将不胜感激
我已经尝试了许多不同的对齐方法,调整宽度和高度的大小,在 div css 中移动宽度和高度,但仍然一无所获
将链接从
display: inline-block
更改为 display: inline-flex
a.fa-brands {
margin: 2em;
text-decoration: none !important;
color: white !important;
background: #1a1a1a;
width: 40px;
height: 40px;
flex-direction: column;
display: inline-flex;
justify-content: center;
align-items: center;
border-radius: 100%;
margin: 5px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet" />
<div class="socials">
<div class="socialbuttons">
<a class="fa-brands fa-instagram" href="https://instagram.com" target="_blank"></a>
<a class="fa-brands fa-github" href="https://instagram.com" target="_blank"></a>
</div>
</div>