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

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;

【讨论】:

以上是关于当我应用“边距:自动”时,页脚不居中的主要内容,如果未能解决你的问题,请参考以下文章

在调整大小时,如何使位置固定页脚不覆盖浏览器的所有其他元素?

软键盘出现时如何保持Android webview中的固定页脚不覆盖输入字段?

Tailwind - 当相邻元素溢出时,页脚不粘并被推动

底部粘页脚不重叠

为啥openxml页脚不发布到文档

为啥页脚不是从左到右一直走?