0

水平視差効果のある Web ページを作成しています。ページの幅を 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 として「inner-container」を繰り返し使用していることに気付きました。同じ HTML ページに複数のインスタンスがあるため、おそらくそれをクラスに変更する必要があります。

于 2013-07-14T07:02:55.877 に答える
0

フィドル と 全画面プレビュー

min-width: 400%の代わりに指定するか、 on にwidth設定する必要があります。そうしないと、4 つのスライドが 960 ピクセル幅のビューポートよりも小さいサイズに収まりません (たとえば、すべての電話) (@sourcecode のフィドルで右にスクロールしてみてください)。 max-width: 960px.silde

が相対的に配置され、座標が設定されていない限り、 は無意味で良くありませんが、それを行う必要はありませんposition: absolute。.slide

また、ボーダーは要素のサイズに追加されます。を介してボックス モデルを変更するかbox-sizing: border-box、幅を 25% 未満に設定するか、側面に 1 ピクセル余分に配置する必要があります。

text-aligncenter will not * センターブロックレベルの要素。デフォルトでは、それらは親の幅の 100% にまたがり、その中のテキストは中央に配置されます。デモでは、30x30 ピクセルの div を 1 つ作成しました。もう 1 つは同じスタイルですが、margin: 0 auto;.

コンテナに を設定するmin-height: 100%と、必要に応じて拡大でき、スクロールバーが不要な場合は強制的に表示されず、少なくとも画面全体を垂直方向に占めるようになります。

于 2013-07-14T07:02:29.120 に答える
0

テキストを中央揃えにしたい場合は、div-container次を使用します。

text-align:center;あなたのcssでは、ここにデモがあります: jfiddle demo

于 2013-07-14T06:40:11.040 に答える