Question

我的目标是让我的邮件图标位于页面底部。我给了<div class=section4>一个position: relative和我的#mailicon一个position:absolute，让图标成为我底部的底部。它工作但现在我的图标总是被推到右边而不再居中。

如何将它放在中间，同时保持在我的底部？此外，我正在建立一个响应式网站，首先是移动...所以最响应的解决方案，越多越好！ :) 谢谢!!

这是我的HTML：

<div class="section section4">
        <img src="icons/ML-network.gif" alt="icon3">
        <h1>...</h1>
        <p class="ultralight">...</p>
        <a href="mailto:contact@magicledger.com"><img id="mailicon" src="icons/email-icon%20color.png" alt="mail icon"></a>
</div>

和CSS：

.section {
    height: 100vh;
    width: 100%;
    text-align: center;
}
.section4 {
    position: relative;
}
#mailicon {
    width: 15%;
    position: absolute;
    bottom: 0; 
}

Answer 1

要使center成为position: absolute元素，您应该像这样设置left: 0; right: 0; margin: auto;：

#mailicon {
    width: 15%;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

JSFiddle

或使用translate：

#mailicon {
    width: 15%;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%,0);
}

JSFiddle

Answer 2

您可以将css代码更改为：

#mailicon {
  width: 15%;
  margin:  auto;
  position: absolute;
  bottom: 0; 
  right: 0;
  left: 0;
}

容器中的img（位置：绝对）（位置：相对）不在中心

2 个答案: