当我应用“边距：自动”时，页脚不居中

Posted 2023-03-29

【中文标题】当我应用“边距：自动”时，页脚不居中

【英文标题】：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;