将页脚与页面底部的边距居中对齐

Question

我有一个页脚，我正在尝试为其添加一些边距并将其与中心对齐。问题是当我缩小移动断点的页面大小时，页脚按钮不再居中对齐，右边的边距变得小于左边。有人可以指导我我可能遗漏的东西吗

CSS :

#footer {
display: flex;
align-content: center;
justify-content: center;
margin: 20px;
position: fixed;
width:90%;
bottom: 0;
}

#footer {
background: #0070FF;
line-height: 2;
text-align: center;
color: #042E64;
font-size: 30px;
font-family: sans-serif;
font-weight: bold;
text-shadow: 0 1px 0 #84BAFF;
box-shadow: 0 0 15px #00214B
}

HTML:

<div id="footer">Footer - Just scroll...</div>

Answer 1

有很多方法可以做到这一点，但使用上面的代码最简单的解决方案是使用 calc。问题是您混合了百分比和固定值 - 但这正是 calc 旨在帮助解决的问题。

这是我所做的：

将宽度从 90% 更改为 calc(100% - 40px)（每边 20px）
将left设置为20px
将bottom设置为20px；

#footer {
display: flex;
align-content: center;
justify-content: center;
left: 20px;
position: fixed;
width: calc(100% - 40px);
bottom: 20px;
}

#footer {
background: #0070FF;
line-height: 2;
text-align: center;
color: #042E64;
font-size: 30px;
font-family: sans-serif;
font-weight: bold;
text-shadow: 0 1px 0 #84BAFF;
box-shadow: 0 0 15px #00214B
}

<div id="footer">Footer - Just scroll...</div>

将页脚与页面底部的边距居中对齐

center align footer with margin to bottom of page

html

css

button

footer

styling