Footer内容居中显示失效，求有效前端解决方案

嘿，我发现你的代码里有个很容易忽略的小错误，这大概率是导致居中失效的核心原因！咱们一步步来搞定它：

1. 先修正CSS拼写错误 #

你的CSS里把 background-color 写成了 ackground-color（少了开头的字母b），这个拼写失误会让浏览器解析样式时出现异常，甚至连带影响其他居中属性的正常生效。

2. 修正后的完整代码 #

CSS代码 #

footer{
    position: fixed;
    bottom: 0;
    width: 100%;
    height:50px;
    color:whitesmoke;
    text-align:center;
    line-height:50px;
    background-color:#76323f; /* 这里修正了拼写错误 */
    display:flex;
    align-items:center;
    justify-content:center;
}

HTML代码 #

<footer>
    Melbourne Public Library Catalogue Site: STAFF ONLY 
    <img id ="html" src="Images/HTML5.png" class ="html"/> 
    &copy; 2018 <!-- 这里把"漏"替换成了标准的版权符号 -->
</footer>

3. 如果还是不生效的额外排查点 #

• 检查样式覆盖：打开浏览器开发者工具（按F12），查看footer元素的样式面板，看看有没有其他更具体的CSS选择器（比如#main footer）覆盖了你的居中属性。如果有的话，可以调整当前选择器的优先级，或者针对性修改冲突样式。
• 图片元素干扰：如果img标签设置了float或者脱离文档流的属性，会打乱flex布局的居中效果。可以给img加上display: inline-block，或者清除它的浮动属性。
• 避免内容遮挡：如果页面底部内容被固定定位的footer挡住，可以给body添加padding-bottom: 50px（数值和footer的height一致），留出足够的底部空间。

内容的提问来源于stack exchange，提问作者Strato