html - CSS 图标没有正确对齐

Question

我网站上的 SoundCloud 图标与中心的图标没有正确对齐。在https://intersexmusic.com向下滚动后可以看到这 一点 我该如何解决？代码如下。

.fa {
    padding: 20px;
    font-size: 30px;
    width: 65px;
    height: 65px;
    text-align: center;
    text-decoration: none;
    margin: 5px 2px;
    border-radius: 50%;
}

标签： htmlcss

Answer 1

您可以通过添加以下规则来解决此问题，这些规则将影响 DOM 该区域中的所有图标。通过将图标绝对定位在相关容器中并使用负值考虑它们自己的宽度translate(-50%, -50%)，我们可以完美地将图标居中。

如果你没有包括这一行……​​</p>

transform: translate(-50%, -50%);

…图标会显得太左，离顶部太远。原因是当您定位某物时top: 50%，计算中不考虑您定位的项目的实际大小。这就是为什么我们需要这transform: translate(-50%, -50%)条线来说明我们定位的物品的实际尺寸。

.card-body .fa {
  position: relative;
}

.card-body .fa::before {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}