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”？

中心对齐工作一次然后中断

1 个答案: