当我应用“边距:自动”时,页脚不居中
Posted
技术标签:
【中文标题】当我应用“边距:自动”时,页脚不居中【英文标题】:Footer doesn't center when I apply 'margin: auto' 【发布时间】:2021-01-20 23:04:33 【问题描述】:我试过了,但页脚没有居中。我尝试放置 display: block 或 inline-block 但这对我也没有帮助。
html:
<div id="secondfooter">
<p>COPYRIGHT 2020 HYUNDAI AUTO ROMANIA. TOATE DREPTURILE REZERVATE.</p>
</div>
CSS:
#secondfooter
width: 900px;
margin: auto;
font-size: 13px;
background: #c00000;
font-family: arial;
text-align: center;
color: white;
float: left;
这里是 jsfiddle 链接:
https://jsfiddle.net/bogdan9/o14p39ek/
【问题讨论】:
它在jfiddle中居中,困惑。 你在使用引导程序吗? 【参考方案1】:使用 flexbox 和宽度:100%。无论您在哪个屏幕上,它都会在中心。
#secondfooter
margin: auto;
font-size: 13px;
background: #c00000;
font-family: arial;
color: white;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
<div id="secondfooter">
<p>COPYRIGHT 2020 HYUNDAI AUTO ROMANIA. TOATE DREPTURILE REZERVATE.</p>
</div>
【讨论】:
【参考方案2】:尝试删除左浮动,它应该可以工作:
#secondfooter
width: 900px;
margin: auto;
font-size: 13px;
background: #c00000;
font-family: arial;
text-align: center;
color: white;
我删除了它,它看起来对我有用。
【讨论】:
宽度需要为 100% 我添加了 900px 的 body 标签的宽度,它起作用了。实际上代码只是整个网站的一部分,我没有放在这里,因为它有很多编码而且问题很小。还是谢谢你,感谢你的回答。【参考方案3】:将width: 100%
给#secondfooter
#secondfooter
width: 100%;
margin: auto;
font-size: 13px;
background: #c00000;
font-family: arial;
text-align: center;
color: white;
【讨论】:
以上是关于当我应用“边距:自动”时,页脚不居中的主要内容,如果未能解决你的问题,请参考以下文章
在调整大小时,如何使位置固定页脚不覆盖浏览器的所有其他元素?