1

だから私はこれが別の中心的な質問であることを知っていますが、解決策なしで数日間GoogleとSOを歩き回っているので、今質問します.

私がやろうとしているのは、流体セクション要素を水平方向に中央に配置し、その中に要素を絶対的に配置した最大幅です。問題は、私のjsFiddleでわかるように、余白が使用可能なスペースの 50% を占有し、残りの 50% がセクションによって使用されることです。私がやりたいのは、セクションを完全に中央に保ちながら、ウィンドウの端に到達するまでセクションのサイズを変更しないようにしながら、ブラウザウィンドウが閉じるにつれて余白を小さくすることです。

CSS-Tricks で、テーブル セル内に要素を絶対に配置することは本当に苦痛になる可能性があることを読んだので、テーブル、テーブル セル ソリューションの使用を避けたいと思います。

編集基本的に、目標は、ビューポートの幅によってコンテンツがレスポンシブになるまで、サイズを変更せずにコンテンツができるだけ多くのスペースを占有するようにすることです。

正しい方向へのバンプをありがとう。

HTML:

<section id="wrapper">
    <section id="content">
        <p>Absolutely positioned imgs, btns, etc. go in here</p>
    </section>
</section>

CSS:

#wrapper {
position:absolute;
width:50%;
height:300px;
margin-left:25%;
margin-right:25%;
outline:1px solid red;
}
#content {
position:absolute;
width:100%;
height:100%;    
max-width:500px;
background:rgb(225, 112, 75);
}
4

2 に答える 2

1

使用できます 

#content {
    display:inline-block;
    text-align:center;
}

display:inline-block;プロパティも持つ要素を中央に配置します。

編集：あなたの質問をよく読んだので、使用することもできます 

#content {
        margin:0 25%;
    }

2 番目のセクションを中央に配置します。

あなたのフィドルが更新されました。 このフィドルからわかるように、すべてが中央に配置され、応答性が向上しています。

EDIT-2:目標を達成するためにメディアクエリを追加したいかもしれません。CSS ファイルの末尾に次のようなものを追加するだけです。 

@media screen and (max-width:720px){
    #content{width:100%; margin:0px;} 
}

これは、画面が 720 以下の幅に達すると、#content (およびそこに入力したすべての ID/CLASS) が宣言どおりに動作することを示しています。

クエリはクロスブラウザーではないことに注意して@mediaください。すべてのブラウザーで機能するようにスクリプトを追加することをお勧めします。respond.jsは、この作業を行うための優れたツールです。

また、@mediaクエリは、少なくとも画面のサイズ変更で変更しようとしているデフォルト プロパティの下に配置する必要があることに注意してください。そのため、css ファイルの最後にクエリを追加することをお勧めします。

HERE は、メディアが適用された別のフィドルです(ボックスのサイズを変更して効果を確認してください)。

于 2013-04-15T08:34:14.063 に答える
0

これがあなたが探していたものかどうか疑問に思います: jsfiddle

ラッパーを次のように変更しました。

#wrapper {
    position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -150px;
  margin-left: -200px;
    width:400px;
    height:300px;
    outline:1px solid red;
}

div が画面の中央に配置されるようにします

于 2013-04-15T08:41:12.093 に答える