Question

我正在为某人制作一个简单的摄影网站，而我却试图弄清楚水平定位。我将边距设置为左/右自动，并将位置设置为相对。应该放在中间，不应该吗？

我在中间有一张我想要的照片幻灯片，然后是我右侧的导航。导航在正确的位置，但幻灯片显示与导航重叠，我无法弄清楚如何使其水平居中。

这是导航：

#nav {
    position: fixed;
    top: 22%;
    right: 1%;
    text-align: center;
}

流氓滑块：

#slider {
    background:#000;
    border:5px solid #eaeaea;
    box-shadow:1px 1px 5px rgba(0,0,0,0.7);
    height:400px;
    width:600px;
    margin: 100px auto 0;
    overflow:visible;
    position:relative;
}

滑块包含在包装器div中：

.wrapper {
    height: 100%;
    width: 55%;
    margin-right: auto;
    margin-left: auto;
    background: #eaeaea;
    padding-bottom: 150px;
}

如何才能做到这一点？

如果您需要更多信息，可以查看页面和源代码： bwphotog.com

Answer 1

子.container元素比其父元素.wrapper宽。如果您移除容器的960px宽度，它将被集中。

Answer 2

将.container类更改为此

.container {
    margin: 0 auto;
    overflow: hidden;
    /* width: 960px; */
}

css定位 - 水平对齐

2 个答案: