Html 字体图标在页脚中的位置不正确

我的网站上有一个页脚

我希望图标在垂直和水平方向上居中，彩色区域为：

始终位于屏幕底部 不比图标高多少 代码：

页脚{ 背景：0e0e； 边框顶部：0px实心0e0e； 字号：0.9em； 边际上限：0px； 填充：0px； 明确：两者皆有； 位置：绝对位置； 底部：0； 宽度：100%； 高度：0px； } 绝对容器，并将其转换到位 使用class.social图标更改ul元素：

阳性：绝对；所以我们可以把它放在页脚里面。 最高：50%；左：50%；所以它处于水平和垂直的中间 转化：转化-50%，-50%；因为位置是从左上角计算的。 页脚{ 背景：0e0e； 边框顶部：0px实心0e0e； 字号：0.9em； 边际上限：0px； 填充：0px； 明确：两者皆有； 位置：绝对位置； 底部：0； 宽度：100%； 高度：120px；/*可更改显示属性*/ } 页脚。社交图标{ 位置：绝对位置； 显示：内联块； 左：50%； 最高：50%； 转化：转化-50%，-50%； } 页脚李{ 保证金：0； 显示：内联块； /*仅供展示*/ 宽度：10px； 高度：10px； 背景颜色：耐火砖； } 绝对容器，并将其转换到位 使用class.social图标更改ul元素：

阳性：绝对；所以我们可以把它放在页脚里面。 最高：50%；左：50%；所以它处于水平和垂直的中间 转化：转化-50%，-50%；因为位置是从左上角计算的。 页脚{ 背景：0e0e； 边框顶部：0px实心0e0e； 字号：0.9em； 边际上限：0px； 填充：0px； 明确：两者皆有； 位置：绝对位置； 底部：0； 宽度：100%； 高度：120px；/*可更改显示属性*/ } 页脚。社交图标{ 位置：绝对位置； 显示：内联块； 左：50%； 最高：50%； 转化：转化-50%，-50%； } 页脚李{ 保证金：0； 显示：内联块； /*仅供展示*/ 宽度：10px； 高度：10px； 背景颜色：耐火砖； } 通过将display:flex和justify-content:center应用到ul，使用flexbox，您可以实现您想要的

评论

---

啊，这是一个整洁的特点。我喜欢1.2em；的外观；。然而，我 还有页脚太高的问题。我想这样做 大约是图标的两倍高，中间是图标

所以，使用对齐项目：从flexbox居中垂直对齐，再加上一些高度，我选择了2em，您可以随意选择您最喜欢的

页脚{ 背景：0e0e； 位置：绝对位置； 底部：0； 宽度：100%； 字体大小：1.2米； } 页脚ul{ 显示器：flex； 证明内容：中心； 对齐项目：居中； 高度：2米； 保证金：0； 填充：0 } 页脚李{ 列表样式：无； 显示：内联块； 保证金：0.5px } 通过将display:flex和justify-content:center应用到ul，使用flexbox，您可以实现您想要的

评论

---

啊，这是一个整洁的特点。我喜欢1.2em；的外观；。然而，我 还有页脚太高的问题。我想这样做 大约是图标的两倍高，中间是图标

所以，使用对齐项目：从flexbox居中垂直对齐，再加上一些高度，我选择了2em，您可以随意选择您最喜欢的

页脚{ 背景：0e0e； 位置：绝对位置； 底部：0； 宽度：100%； 字体大小：1.2米； } 页脚ul{ 显示器：flex； 证明内容：中心； 对齐项目：居中； 高度：2米； 保证金：0； 填充：0 } 页脚李{ 列表样式：无； 显示：内联块； 保证金：0.5px }

---

我想使页脚更薄，所以我更改了边距：0；至余量：-30px；。增加此值会进一步降低高度，但图标的位置保持不变。我希望他们在这个页脚的中心，无论它的高度。只要减少页脚或图标的字体大小。不要弄乱页边距，而要使用字体大小：.9em；尝试更改为字体大小：.6em；，你会看到不同的地方啊，这是一个很好的特点。我喜欢1.2em；的外观；。然而，我仍然有页脚太高的问题。我希望它的高度是图标的两倍左右，中间放着图标。你在问题中说不比图标高太多，这就是我为什么这么做的原因

---

一点也不高，但我可以更新我的答案那太棒了，迪帕斯。虽然，现在，至少对我来说是这样！页脚栏似乎比图标高度高出三倍多。我想使页脚更薄，因此我更改了边距：0；至余量：-30px；。增加此值会进一步降低高度，但图标的位置保持不变。我希望他们在这个页脚的中心，无论它的高度。只要减少页脚或图标的字体大小。不要弄乱页边距，而要使用字体大小：.9em；尝试更改为字体大小：.6em；，你会看到不同的地方啊，这是一个很好的特点。我喜欢1.2em；的外观；。然而，我仍然有页脚太高的问题。我希望它的高度是图标的两倍左右，中间有图标。你在问题中说不比图标高多少，这就是为什么我没有高度，但我可以更新我的答案，那太棒了，迪帕斯。虽然，现在，至少对我来说是这样！页脚栏似乎比图标高度高出三倍以上。