float：left divを中央に揃えますか？

画像のグループをページ全体に水平に表示したい。各画像の下にいくつかのリンクがあるため、各画像/リンクグループの周りにコンテナを配置する必要があります。

私が欲しいものに最も近いのは、それらをfloat：leftのdivに配置することです。問題は、コンテナーが左ではなく中央に揃うようにすることです。どうすればこれを達成できますか？

display:inline-block;フロートの代わりに使用

フロートを中央に配置することはできませんが、インラインブロックはテキストのように中央に配置されるため、「行」の外側の全体的なコンテナーに配置します。text-align: center;次に、画像/キャプションコンテナーごとに設定しinline-block;ます。 -必要に応じてテキストを左揃えにします

CSS Flexboxは最近よくサポートされています。flexboxに関する優れたチュートリアルについては、こちらをご覧ください。

これは、すべての新しいブラウザーで正常に機能します。

#container {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
}

.block {
  width:              150px;
  height:             150px;
  background-color:   #cccccc;
  margin:             10px;        
}

<div id="container">
  <div class="block">1</div>    
  <div class="block">2</div>    
  <div class="block">3</div>    
  <div class="block">4</div>    
  <div class="block">5</div>        
</div>

ディスプレイを使用しない理由を尋ねる人もいるでしょう：インラインブロック？単純なことでは問題ありませんが、ブロック内に複雑なコードがある場合、レイアウトが正しく中央揃えされなくなる可能性があります。フレックスボックスは、フロート左よりも安定しています。

次のように試してください：

  <div id="divContainer">
    <div class="divImageHolder">
    IMG HERE
    </div>
    <div class="divImageHolder">
    IMG HERE
    </div>
    <div class="divImageHolder">
    IMG HERE
    </div>
    <br class="clear" />
    </div>

    <style type="text/css">
    #divContainer { margin: 0 auto; width: 800px; }
    .divImageHolder { float:left; }
    .clear { clear:both; }
    </style>

浮動要素をaでラップして<div>、次のCSSを指定します。

.wrapper {

display: table;
margin: auto;

}

おそらくこれがあなたが探しているものです-https://www.w3schools.com/css/css3_flexbox.asp

CSS：

#container {
  display:                 flex;
  flex-wrap:               wrap;
  justify-content:         center;
}

.block {
  width:              150px;
  height:             150px;
  margin:             10px;        
}

HTML：

<div id="container">
  <div class="block">1</div>    
  <div class="block">2</div>    
  <div class="block">3</div>          
</div>

.contentWrapper {
    float: left;
    clear: both;
    margin-left: 10%;
    margin-right: 10%;
}

.repeater {
    height: 9em;
    width: 9em;
    float: left;
    margin: 0.2em;
    position: relative;
    text-align: center;
    cursor: pointer;
}