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

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 类。

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

这是一个 updated version of your fiddle .

此外，我注意到您在每张幻灯片中都重复了“inner-container”作为 id。您可能应该将其更改为一个类，因为在同一个 HTML 页面中有多个它的实例。