3

ドキュメントの中央に div を配置したいと思います。div は、コンテンツを表示するために可能なすべてのスペースを取る必要があり、コンテンツ自体は左に配置する必要があります。

私が作成したいのは、行と列が中央にある画像ギャラリーで、新しいつまみを追加すると左に揃えられます。

コード：

<div id="out">
    <div id="inside">
        <img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/>   
        <img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/>   
        <img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/>   
        <img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/>   
        <img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/> 
    </div>
</div>

そしてCSS：

img {
    height: 110px;
    width: 110px;
    margin: 5px;
}

#out {
    width: 100%;
}

#inside {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    background: #e2e2f2;
}

ライブバージョンはこちら: http://jsfiddle.net/anPF2/10/ お気づきのとおり、「#inside」の右側に削除したいスペースがあるため、このブロックは最後の正方形まで表示され、すべての中央揃えになります。

編集: この写真をご覧ください: https://www.dropbox.com/s/qy6trnmdks73hy5/css.jpg これは、私が取得しようとしているものをよりよく説明しています。

編集 2: 別の写真をアップロードして、低解像度の画面でどのように調整するかを示しました。左右のマージンに注意してください。これは私が取得しようとしているものです (これまでのところ失敗しています:\) https://www.dropbox.com/s/22zp0otfnp3buke/css2.jpg

EDIT 3 / ANSWER さて 、私の問題を解決しようとしてくれてありがとう。画面サイズ変更イベントをリッスンする機能を備えたJSを使用して、この問題を解決しました。関数は右マージンのサイズをチェックし、左にパディングを追加して、すべてのコンテンツが中央に配置されるようにします。CSS を使用した解決策が見つかりませんでした。もしお持ちでしたら、ぜひ教えていただきたいです。

ありがとうございます！

4

5 に答える 5

0

width中央に配置するにはforを指定#insideします。使用しwidth: 120pxました。Fiddle: http://jsfiddle.net/anPF2/7/

さらに、CSS は、 などの属性ではなく、画像の高さと幅に使用する必要がありますheight="300"。フィドルはこの変更を反映しています。

于 2013-05-27T12:28:37.303 に答える
0

ボックスがページの幅全体にならないようにするには、幅を 100% 未満に設定して中央に#out追加margin:auto;します。

#out {
    width: 90%;
    margin:auto;
}

http://jsfiddle.net/anPF2/36/

于 2013-05-27T13:00:01.210 に答える
0

これはあなたが達成したいことですか？デモ

img {
height: 110px;
width: 110px;
margin: 5px;
display: inline-block;
}

#out {
width: 100%;
margin: 0 auto;
position: relative;
border: 1px solid red;
}

#inside {
position: relative;
background: #e2e2f2;
}
于 2013-05-27T12:37:52.413 に答える
0

を使用するとdisplay:inline-block余分なマージンがかかります。コンテナにセットさfont-size:0pxれているものを削除します。デモ#outを見る

于 2013-05-27T12:32:08.760 に答える