放大/缩小时页脚未对齐

Question

我目前在使用网站页脚时遇到问题。

当以100％尺寸（正常尺寸）处理它时，页脚很好地对齐。然而，当我调整它的大小时，它完全不对齐并且位于左侧，它需要保持居中。

截图：

相关CSS：

/* Dark blue area above the main part of the footer, stays aligned */
#footerUpper {
    clear: left;
    width: 100%;
    vertical-align: top;
    background-color: #252B76;
    text-align: center;
    color: #FFFFFF;
    margin-top: 30px;
/*  padding: 5px;*/
}

#footerUpper ul {
    padding: 0;
    margin: 25px 0px;
    list-style: none;
}

#footerUpper li {
    display: inline;
    padding: 0 52px;
    font-size: 14px;
    font-weight: bold;
}

#footerUpper li a {
    text-decoration: none;
    color: #FFFFFF;
}

/* Main part of the footer */
#footer {
    float: left;
    width: 100%;
    color: #252B76;
    background-color: #89B0F1;
    padding: 5px;
}

/* Table within the footer */
#footerTable {
    width: 980px;
    margin-left: 150px;
}

感谢。

Answer 1

如果没有看到更多代码或其中的一个实例，就很难对出现问题的方法有太多了解。

但我认为一个解决方案可能是在内部内容上有一个静态宽度，所以例如错误对齐的内容，我认为是你的“footerTable” - 将“margin：0 auto”应用于它中心对齐它，这是假设它的父级是100％宽度，我相信它是。另外，删除适用于它的任何其他保证金规则。

Answer 2

这是因为你将页脚浮动到左侧，然后没有中心对齐的页脚容器。你可以：

• 删除float: left，而是执行margin-left: auto;和margin-right: auto;
• 为您的页脚创建一个容器（或者最好是整个布局，如果它们都要居中对齐）并使用margin-left: auto;和margin-right: auto;
将容器与中心对齐

当然还有其他方法可以集中对齐块元素，但这些方法是最有效的，也是最值得推荐的。

Answer 3

由于你没有理由浮动页脚（所以你说）：

删除以下样式：

float: left;
width: 100%;

然后，为确保表格居中，请添加以下样式：

text-align:center;

你应该发现页脚伸展到页面宽度，无论缩放是什么。