-1

我目前遇到网站页脚问题。

当以 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;
}

谢谢。

4

3 回答 3

2

如果没有看到更多的代码，或者它的工作示例，很难对出了什么问题有太多的了解。

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

于 2013-06-11T11:04:47.340 回答
1

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

  • 删除float: left并改为执行margin-left: auto;andmargin-right: auto;
  • 为您的页脚制作一个容器（或者最好是整个布局，如果它全部居中对齐）并使用和对齐容器到margin-left: auto;中心margin-right: auto;

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

于 2013-06-11T11:05:36.537 回答
0

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

删除以下样式：

float: left;
width: 100%;

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

text-align:center;

并且无论缩放如何，您都会发现页脚会延伸到页面宽度。

于 2013-06-11T11:06:48.567 回答