中心对齐页脚,边距到页面底部

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (68)

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

运行示例

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>
提问于
用户回答回答于

有很多方法可以做到这一点,但上面代码的最简单的解决方案是使用calc。问题是你要混合百分比和固定值 - 但这正是计算有助于解决的问题。

这是我做的:

  • 将宽度更改90%calc(100% - 40px)20px每侧)
  • 设置left20px
  • 设置bottom20px;
#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>

扫码关注云+社区

领取腾讯云代金券