Question

我正在创建一个具有水平视差效果的网页。我将页面宽度设置为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/ 谢谢！

Answer 1

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

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

这是一个updated version of your fiddle。

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

Answer 2

如果您想在div-container中居中对齐文字，请使用：

你的css中有

text-align:center;，这是演示：jfiddle demo

Answer 3

fiddle ＆amp; full-screen preview

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

position: absolute毫无意义且不好，除非.slide位于相对位置，且坐标已设定，但没有必要这样做。

此外，边框另外到元素的大小。您必须更改框模型，通过box-sizing: border-box，将宽度设置为略低于25％，或者在侧面增加1px。

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

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

如何使用百分比宽度将页面上的元素居中？

3 个答案:

fiddle ＆amp; full-screen preview