4

これは、今日しばらく私をイライラさせてきた単純なパズルです。

次のページ マークアップを検討してください。

<head>
    <style type="text/css">
        #wrapper { overflow: hidden; }
        #content { width: 750px; height: 100px; background: orange; }
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="content">Foo bar</div>
    </div>
</body>

ビューポートの幅に関係なくdiv#content、ページの中央に配置するにはどうすればよいですか?

さまざまなトリック ( を含むtext-align: center; display: inline-block;) と絶対配置を試しましdiv#contentたが、ブラウザー ウィンドウの幅が 750px 未満になると、すべて左揃えになります。

過去に、有名なウェブサイトがこれを行っているのを見たことがあります。たとえば、Apple.com で新しい Retina iPad を宣伝したとき: 写真の iPad は、メイン ページ領域を超えて広がった非常に幅の広い画像でしたが (<body>要素の CSS 背景画像ではないことに注意してください)、スクロールは発生しませんでした。ブラウザ ウィンドウがメイン ページのコンテンツにしか収まらない場合。残念ながら、これを行う既存のサイトが見つからないように見えるため、参照が見つかりません。

ありがとう。

4

3 に答える 3

5

これでしょうか？見てみましょう - > http://jsfiddle.net/joplomacedo/CkvuG/

HTML

<div id="page">
  <div id="main">
      <div id="extended-out"><img src="http://myfreeipad.us.com/wp-content/uploads/2011/10/ipad.png" /></div>
  </div>
</div>

CSS

#page {
  overflow: hidden;
  min-width: 200px; /*same as #mains width*/
}

#main{
  position: relative;
  height: 500px;
  width: 200px;
  margin: 0 auto;
  background-color: lightgreen;
}


#extended-out { 
  height: 200px;
  margin: 0 -100px;
  background: indianred;
  border: 1px solid red;
}

#extended-out img {
    width: 100%; height: 100%;
}

</p>

于 2012-07-04T19:32:52.380 に答える
-1

http://jsfiddle.net/CNNcV/ 

<head>
        <style type="text/css">
            #wrapper { overflow: hidden; }
            #content { width: 750px; height: 100px; background: orange; 
            margin:0px auto;
            width:100%;}
        </style>
    </head>
    <body>
        <div id="wrapper">
            <div id="content">Foo bar</div>
        </div>
    </body>​

それはあなたが探しているものですか？

于 2012-07-04T17:39:30.560 に答える
-1

これに加えmargin: autoて、

#content { width: 750px; height: 100px; background: orange; margin: auto}
于 2012-07-04T17:39:34.913 に答える