Question

我正在尝试将页脚菜单居中，并使用float: right生成图像。但是菜单会在未被图像占据的宽度内居中那么可以将菜单相对于整个屏幕或容器宽度居中吗？

我尝试将图片包含在div中并将position: relative分配给div并将position: absolute分配给图像，并将div宽度调整为100％但我的菜单无法访问。如果我将图像的z-index更改为-1，我可以单击菜单但图像会消失。

以下是一个示例：CodePen。

Answer 1

您可以发布完整代码吗？包括HTML和CSS

根据您所写的内容，您似乎应该有两个div：一个用于您的页脚文本，另一个用于您的图像。为了良好的练习，你应该用footer包裹你的整个页脚。您可以在图像上使用绝对定位。

.footer {
    width: 100%;
    height: 250px; /* Or whatever % or px value you'd like */
    position: relative;
} /* feel free to assign other values, such as a border, shadow, etc. */

.img {
    right: 0;
    position: absolute;
}

另一种方法是创建一个名为“footer wrapper”的css id，您可以使用它来将文本换行到div中。这可以超越一个页脚使用。一个经典的包装器示例如下所示：

.wrapper {
    max-width: -webkit-calc(800px - (#{$spacing-unit} * 2));
    max-width:         calc(800px - (#{$spacing-unit} * 2));
    margin-right: auto;
    margin-left: auto;
    padding-right: $spacing-unit;
    padding-left: $spacing-unit;
    @extend %clearfix;
}

$ spacing-unit是一个_sass变量，可以设置为某个值（以px为单位）。

Answer 2

当然，不要漂浮图像。而是在它上面使用绝对定位，在页脚上使用相对位置：

img {
    position:absolute;
    right:0;
}
footer {
    width:500px;
    height: 100px;
    border:1px solid black;
    margin:0 auto;
    position:relative;
}

jsFiddle example

中心div和浮动图像

2 个答案: