我在屏幕中间放置了3个divs,每个divs都有一个fontawesome的图标,但有些图标像骰子和代码有点偏移,除了微笑.(我假设这是因为微笑是圆形的就像div,但我不确定)我想知道我如何才能使所有的图标集中在他们自己的div.整个代码的Codepen:Smooth Buttons with Fontawesome Icons
下面是HTML和CSS代码:
body {
background-color: #333;
font-size: 1.5em;
padding: 0;
}
.buttons {
display: flex;
gap: 25px;
justify-content: center;
align-items: center;
text-align: center;
line-height: 50px;
vertical-align: bottom;
float: center;
}
.button {
padding 5px;
color: black;
height: 50px;
width: 50px;
border: 15px solid #2b2b2b;
background-color: #2b2b2b;
border-radius: 100%;
transition: all ease-in-out 0.5s;
}
<div class="buttons">
<div class="button"><i class="fa fa-dice fa-2xl"></i></div>
<div class="button"><i class="fa fa-code fa-2xl"></i></div>
<div class="button"><i class="fa fa-smile fa-2xl"></i></div>
</div>
我已经试过改变边缘,显示类型和文本对齐,但没有任何效果.