【问题标题】: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中居中,困惑。
  • 你在使用引导程序吗?

标签: html margin center footer


【解决方案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;
    }
    

    【讨论】:

      猜你喜欢
      • 2011-08-09
      • 2013-05-24
      • 2014-06-07
      • 1970-01-01
      • 1970-01-01
      • 2013-06-14
      • 1970-01-01
      • 1970-01-01
      • 2013-10-19
      相关资源
      最近更新 更多