Center align works once and then breaks - css

Question

I'm running into an issue where center aligning a set of images works in the first div I use it in but then doesn't in subsequent calls.
Here's my 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;
}
And my 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>
So the first set of centered images look great, my text wraps beautifully around my left floating image, and then on the second call to the centerImage class (and third, etc) the images do a partial indent (to what looks like the left edge of the first set of centered images) but are not centered. I've also tried using
<div style="clear:both"></div>
above the additional centered divs (this fixed alignment issues for me in a separate project) but it doesn't do anything. What am I missing?

Answer 1

Have you tried adding “clear: both” to your .centerImage CSS declaration?