2

私は次の HTML コードを持っています。各シーン div は幅が設定され、左にフロートされています。画面のサイズに関係なく、ブロック全体をビューポート内の中央に配置し
たいと思います。.section_2

<div id="wrapper">
  <div id="scroller">
    <section class="section_2">
      <div class="scene2B1" data-stellar-ratio="1.1"></div>
      <div class="scene2B2" data-stellar-ratio="1.4"></div>
      <div class="scene2B3" data-stellar-ratio="1.3"></div>
      <div class="scene2B4" data-stellar-ratio="1.5"></div>
      <div class="scene2B5" data-stellar-ratio="1.2"></div>
    </section>
4

3 に答える 3

2

CSS。

.section_2 { margin: 0 auto; width: 800px; }

注: 幅を設定する必要があります。

于 2012-10-04T14:38:10.710 に答える
1

ビューポートの中央に位置するようにdiv＃wrapperを設定する場合は、次のいずれかを実行することが重要です。

  1. div＃wrapperの正確な幅と高さを知る
  2. javascriptを使用して、ユーザーのビューポートに基づいてdiv＃wrapperの高さと幅を動的に変更します

オプション＃1のサンプルコードを提供します（オプション＃2は、javascriptを追加してdiv＃wrapperのサイズを動的に変更することを除いて同じです）

HTML：

<body>
  <div id="wrapper">
    <div id="scroller">
      <section class="section_2">
        <div class="scene2B1" data-stellar-ratio="1.1"></div>
        <div class="scene2B2" data-stellar-ratio="1.4"></div>
        <div class="scene2B3" data-stellar-ratio="1.3"></div>
        <div class="scene2B4" data-stellar-ratio="1.5"></div>
        <div class="scene2B5" data-stellar-ratio="1.2"></div>
      </section>
    </div>
  </div>
</body>

CSS：

div#wrapper {
  width: 300px; /* Must define this */
  height: 300px; /* Must define this */
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -150px /* This is HALF of the height times -1 */
  margin-left: -150px /* This is HALF of the width times -1 */
}
于 2012-10-05T01:49:51.197 に答える
0

ほとんどの場合、@SMacFadyen が提供した方法でうまくいきますが、うまくいかない場合 (なぜうまくいかないのかわかりません)、次のことを試すことができます。

    .section_2 {
         margin-left:400px;/* half the width*/
         left:-50%;
         width: 800px;
    }

他の回答と同様に、幅を設定する必要があります。ややハックのようですが、私にとってはうまくいきます。

デモ: http://jsfiddle.net/jdwire/EfSBA/1/z

親要素だけでなく、ビューポート全体の中央に配置するには、次を試してください。

     position:fixed;

ただし、これには微妙な副作用が生じる可能性があるため、必要なものであることを確認してください

于 2012-10-05T01:27:26.663 に答える