浮動小数点型ではなく、幅と高さが設定されたブロックのグループがあり、inline-blockと表示されます。理想的には、このブロック全体をビューポートの中央に配置したいと思います。参照：ラップ可能な中央のブロック
問題は、私は、外側のdiv inline-blockを作り、それが含まれているdiv要素の幅に折り返された場合でも、margin: 0 autoはセンターをしないことです。 float ingもそうではありませんし、外側のdivを無駄にするようなシュリンクなど、他の多くの手法も試してみました。
個々のブロックをフローティングにすることはできません。
text-align: center最後の行にブロック数が異なる場合、それらは中央に配置され、そのようなことは起こりたくありません。
これもjavascriptなしで動作する必要があります。
margin: 0 auto;は、定義されたwidthを必要とします。私の貧弱な解決策では#outmanはdisplay: inline;で実際の幅が得られ、さらに<div id="container">には自動余裕があります。 javascriptのは、新しいdiv要素に真の幅を設定するために必要とされる：
HTML：
<div id="container">
<div id="outman">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
CSS：
#container {
margin: 0 auto;
}
#outman {
display: inline;
}
#outman div {
display: inline-block;
width: 200px;
height: 200px;
border: 5px solid red;
}
のjavascript：
$(document).ready(function() {
$('#container').width($('#outman').width());
});
=== === UPDATE
あなたはhtmlコード内のコンテナの後にスクリプトを直接移動し、$(document).ready()を削除する場合は高速になります。
<div id="container">
<div id="outman">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<script type="text/javascript">
$('#container').width($('#outman').width());
</script>
はまた、私updated exampleを参照してください。
=== === UPDATE
ウィンドウのサイズ変更の場合：
<head>
...
<script type="text/javascript">
$(window).resize(function() {
$('#container').css('width', 'auto');
$('#container').width($('#outman').width());
});
</script>
...
</head>
<body>
...
<div id="container">
<div id="outman">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<script type="text/javascript">
$(window).resize();
</script>
...
</body>
私はあなたが探している正確な機能を把握しましたが、おそらくこれが役立つか分からない：http://jsfiddle.net/ceSKJ/
良い努力ですが、一番左のブロックのマージンは、一番右のブロックのマージンと同じにする必要があります。まだ残っています。 –
これは良いjavascriptの解決策ですが、私はJavaScriptでそれを行うことはできません。問題は、ページが読み込みにかなりの時間（約1秒）を要し、javascriptが 'document.ready'でのみ起動するため、ブロックが事実の後に真ん中にスナップするように見えるということです。 –
私は自分の答えを更新し、この時間を大幅に短縮できることを願っています。 – scessor