2

画面を超えて届く大きなdivを中央に配置しようとしています。これは、.container div約幅が大きく、実際のコンテンツが約幅のクラスで内側に1920px中央に配置されていることに関係しています。.containerdiv.content1200px

なんとか中央に配置できますが、.container境界が画面外にある場合の中央揃えは機能しません。ブラウザの左枠に対して左枠を配置します。

[ |   [content]   | ]

Legend:
| = screen edge
[ ] = div edge

.content.container前景に関連する背景の位置が変わらないように、常に中央に配置する必要があります。

<div class="container">
  <div class="content">
    <section></section>
  </div>
</div>
4

1 に答える 1

6

幅がわかっている場合は、.containerこれを行うことができます：

.container {
    position: relative;
    left: 50%;
    margin-left: -960px; /* Negative margin half of the element width */
}

の幅がわからない場合は、(ダーティ) jQuery の代替手段を次に示します.container。基本的に同じ結果です。幅を半分にして負のマージンを計算するだけです。

CSS:

.container {
    position: relative;
    left: 50%;
}

jQuery:

var elWidth = (($('.container').width())/2)*-1;

$('.container').css('margin-left', elWidth);

デモ

于 2013-05-08T21:36:37.637 に答える