css - 中央揃えは一度機能してから壊れます

Question

一連の画像の中央揃えが、使用する最初の div では機能するが、その後の呼び出しでは機能しないという問題が発生しています。

これが私のCSSです：

.writingsText {
    width: 750px;
    margin-left: 50px;
    text-align: justify;
}

.floatImageLeft { 
    float: left;
    padding: 10px;
}

.centerImage {
    display: block;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
}

そして私のhtml：

<div class="writingsText">
Text, text, blah, blah
<br /><br />
  <div class="centerImage">
  <img src="goldengrid.png" width="270" height="170" />
  <img src="spacer.png" width="10px"/>
  <img src="goldenspiral.png" width="270" height="170" />
  </div>
<br />
  <div class="floatImageLeft"><img src="kochiteration.png" /></div>
Text, text, blah, blah
<br /><br />
  <div class="centerImage">
  <img src="mandelbrotgif.gif" width="200" height="200" />
  <img src="spacer.png" width="10px"/>
  <img src="kochgif.gif" width="200" height="100" />
  </div>
<br />
</div>

したがって、中央に配置された最初の画像のセットは見栄えがよく、テキストは左のフローティング画像の周りを美しくラップします。次に、centerImage クラスへの 2 回目の呼び出し (および 3 回目など) で、画像は部分的にインデントされます (左端のように見えるものまで)。中央に配置された画像の最初のセットの）が、中央に配置されていません。私も使ってみました

<div style="clear:both"></div>

追加の中央の div の上 (この修正された配置の問題は、別のプロジェクトで発生します) ですが、何もしません。私は何が欠けていますか？

Answer 1

.centerImage CSS 宣言に「clear: both」を追加してみましたか?