将页脚与页边距居中对齐到页面底部
将页脚与页边距居中对齐到页面底部
提问于 2019-03-01 08:50:13
我有一个页脚，我正在尝试添加一些页边距，并将其对齐到中心。问题是，当我缩小移动断点的页面大小时，页脚按钮不再居中对齐，右边距变得比左边距小。有人能告诉我我可能错过了什么吗？
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>回答 1
Stack Overflow用户
回答已采纳
发布于 2019-03-01 08:57:46
有很多方法可以做到这一点，但对于上面的代码，最简单的解决方案是使用calc。问题是您混合了百分比和固定值-但这正是calc要帮助解决的问题。
下面是我所做的：
Set
- 将宽度从
90%更改为calc(100% - 40px)(两边各为20px)
-
leftto20px
- Set
bottomto20px;
#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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54936434
复制相关文章
相似问题
腾讯云开发者
