0

我正在创建一个具有水平视差效果的网页。我将页面宽度设置为 400%，这样我就可以有 4 个页面，因此它会响应不同的浏览器宽度。但是，我将如何在每个页面部分中居中元素（即如何在 0-100%、101-200% 等部分中居中元素）我尝试设置指定的宽度，然后使用margin: 0 auto，但无济于事。有任何想法吗？

HTML：

<div id="transition-slide-container">   <!--begin transition-slide-container-->         
            <div id="transition-slide">
                <div class="slide" id="home">
                    <div id="inner-container">
                        <h1>home</h1>                       
                    </div>
                </div>
                <div class="slide" id="portfolio">
                    <div id="inner-container">
                        <h1>portfolio</h1>
                    </div>
                </div>
                <div class="slide" id="about">
                    <div id="inner-container">
                        <p>about</p>
                    </div>
                </div>                  
                <div class="slide" id="contact">
                    <div id="inner-container">
                        <h1>Contact</h1>                            
                        </div>
                    </div>
                </div>
            </div>
        </div>

CSS：

div#transition-slide-container {    
    background: #bee1ff;    
    padding-top: 128px;
    padding-bottom: 50px;
    height: 900px;
    width: 400%;    
    z-index: -1;
    position: relative;
}
div#transition-slide {
    white-space: nowrap;
    left: 0;
}
.slide {
    display: inline-block;
    width: 100%;
    margin: 0 auto; 
    border-left: 1px #000 solid;
}
div#inner-container {
    width: 960px;
    margin: 0 auto;
    padding: 0;
    position: absolute;
}

网站：andrewgu12.kodingen.com 编辑：这是一个 jsfiddle：http: //jsfiddle.net/6Gtaf/ 谢谢！

4

3 回答 3

1

您需要添加text-align:center到幻灯片类。

.slide {
    display: inline-block;
    width: 100%;
    margin: 0 auto; 
    border-left: 1px #000 solid;
    text-align:center;
}

这是您的 fiddle 的更新版本。

另外，我注意到您在每张幻灯片中重复“内部容器”作为 id。您可能应该将其更改为一个类，因为在同一个 HTML 页面中有多个实例。

于 2013-07-14T07:02:55.877 回答
0

如果要居中对齐文本，请div-container使用：

text-align:center;在你的 css 中，这里是演示：jfiddle 演示

于 2013-07-14T06:40:11.040 回答
0

小提琴 和 全屏预览

您应该指定min-width: 400%而不是width，或设置max-width: 960px为 on .silde。否则，4 张幻灯片将不适合小于 960 像素宽的视口，例如每部手机（尝试在@sourcecode 的小提琴上向右滚动）。

position: absolute除非是相对定位，并且设置了坐标，否则这是没有意义的，也不是很好.slide，但没有必要这样做。

此外，边框是元素大小的补充。您必须通过 更改盒子模型，box-sizing: border-box将宽度设置为略小于 25%，或者在边上多留 1px。

text-aligncenter不会* 居中块级元素。默认情况下，它们跨越父级宽度的 100%，并且其中的文本居中。在演示中，我创建了一个 30x30 像素的 div。另一个有相同的风格，但也margin: 0 auto;。

将容器设置为具有 amin-height: 100%允许它根据需要增长，如果不需要滚动条，则不会强制滚动条，并确保它至少垂直占据整个屏幕。

于 2013-07-14T07:02:29.120 回答