首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >将页脚与页边距居中对齐到页面底部

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

Stack Overflow用户
提问于 2019-03-01 08:50:13
回答 1查看 131关注 0票数 1

我有一个页脚,我正在尝试添加一些页边距,并将其对齐到中心。问题是,当我缩小移动断点的页面大小时,页脚按钮不再居中对齐,右边距变得比左边距小。有人能告诉我我可能错过了什么吗?

Running example

CSS:

代码语言:javascript
复制
#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:

代码语言:javascript
复制
<div id="footer">Footer - Just scroll...</div>
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-03-01 08:57:46

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

下面是我所做的:

Set

  • 将宽度从90%更改为calc(100% - 40px) (两边各为20px)

  • left to 20px

  • Set bottom to 20px;

代码语言:javascript
复制
#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
}
代码语言:javascript
复制
<div id="footer">Footer - Just scroll...</div>

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/54936434

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档