Css “中心对齐”工作一次，然后断开

我遇到了一个问题，中心对齐一组图像在我使用它的第一个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类（第三个，等等）时，图像做了部分缩进（看起来像第一组居中图像的左边缘），但没有居中。我也试过使用

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

---

在附加的居中div上方（这在一个单独的项目中为我解决了对齐问题），但它没有做任何事情。我遗漏了什么？

您是否尝试过在.centerImage CSS声明中添加“clear:All”？

在这里工作：您的cssWell可能还有另一个问题，我们开始吧。删除文本对正可以做到这一点。这对我来说毫无意义，但我接受了。我想这些图像需要放在文本div之外。我想澄清一下，第一组图像实际上也不是居中的，它们只是因为大小的原因而看起来很巧合。