如何将漂亮的图标放在div中居中？

Question

我在屏幕中间居中放置了 3 个 div，每个 div 都有一个来自 fontawesome 的图标，但有些图标（例如骰子和代码）有点偏移，除了微笑。 （我认为发生这种情况是因为微笑就像 div 一样是圆形的，但我不确定）我想知道如何使所有图标都以自己的 div 为中心。 Codepen 包含完整代码：带有 Fontawesome 图标的平滑按钮

HTML

<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>

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;
}

我已经尝试过更改边距、显示类型和文本对齐方式，但没有任何效果。

Answer 1

您可以为固定宽度图标添加类

fa-fw

。其次，你的字体对于圆圈来说太大了，所以它偏离了中心。我将大小设置为

20px

现在它看起来居中。

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;
  font-size: 20px;
  color: black;
  height: 50px;
  width: 50px;
  border: 15px solid #2b2b2b;
  background-color: #2b2b2b;
  border-radius: 100%;
  transition: all ease-in-out 0.5s;
}

.button:hover {
  transform: scale(1.1) rotate(360deg);
  box-shadow: 0 0 15px #111;
  cursor: pointer
}

.button:active {
  animation: clicked ease 0.25s
}

@keyframes clicked {
  from {
    background-color: #2b2b2b;
    border: 15px solid #2b2b2b;
    scale: 1;
  }
  to {
    background-color: #333;
    border: 15px solid #333;
    scale: 1.05;
  }
}

<div class="buttons">
  <div class="button"><i class="fa fa-fw fa-dice fa-2xl"></i></div>
  <div class="button"><i class="fa fa-fw fa-code fa-2xl"></i></div>
  <div class="button"><i class="fa fa-fw fa-smile fa-2xl"></i></div>
</div>

<script src="https://kit.fontawesome.com/4fc295af45.js" crossorigin="anonymous"></script>