0

我遇到了一个问题，即在我使用它的第一个 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 上方（这在一个单独的项目中对我来说是固定的对齐问题），但它没有做任何事情。我错过了什么？

4

1 回答 1

0

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

于 2013-05-20T21:31:54.603 回答