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 类(以及第三次等)时，图像进行了部分缩进(看起来像第一组居中图像的左边缘)但不居中。我也试过使用

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

在额外的居中 div 之上(这在一个单独的元素中对我来说是固定的对齐问题)但它没有做任何事情。我错过了什么？

Answer 1

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