0

基本的に、幅 512px、高さ 336px の div があります。この div を常に画面の中央に配置したい。ブラウザー ウィンドウがこれらのサイズよりも小さくなる場合は、ユーザーがすべてのコンテンツを表示できるように、スクロール バーを起動する必要があります。

現時点では、div を中央に配置することができました。最小幅/最小高さを設定しました。高さは完全に機能していますが、何らかの理由で最小幅が機能していません。スクロールバーが表示されているようですが、コンテンツが左側で切り取られており、その理由がわかりません。

ここでjsfiddleをノックアップしました（ウィンドウのサイズを変更して、コンテンツがブラウザーウィンドウよりも大きくなると、問題が表示されます）

HTML:

<div id="vert-wrapper">
    <div id="wrapper">        
        <img src="http://lorempixel.com/512/336/" width="512" height="336" />
    </div>
</div>

そしてCSS：

#vert-wrapper { width: 512px; min-height: 336px; height: 100%; position: absolute; left: 50%; margin-left: -256px; }
#wrapper { width: 100%; min-width: 512px; height: 336px; position: absolute; top: 50%; margin-top: -158px; }

どんな助けでも大歓迎です。ありがとう。

4

1 に答える 1

1

マージンが残っているからです。コンテナーが小さくなっています。大きすぎる余白を設定しようとしています。メディアクエリを使用してみてください。私は試してみましたが、うまくいくようです.あなたの写真は全体的に見えるようです.私はクエリの制限としてあなたの写真の幅を置き、すべてのマージンをキャンセルします:

@media (max-width:512px){
    #vert-wrapper {left:0%; margin-left:auto; }
}
于 2013-02-17T15:49:49.047 に答える