Question

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

CSS：

QSettings

HTML：

#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
}

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>

使页脚居中对齐，页边距到页面底部

1 个答案: