Div Br Image Column 1px Misalignment

Only the very last image of the column misaligns by 1px when I code this way. I know 2 other ways to code to get the result without the misalignment, (using ul or using multiple div in a row without any br), but it's disappointing cuz this seemed even simpler to me. What's the reason this happens!?

CSS:

div.a {
margin: 0;
overflow: auto;
padding: 0;
text-align: center;
word-wrap: break-word;
}
ul.b {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}

HTML:

<div class="a">
<img src="http://ift.tt/1GnIxXS" alt="free will determinism and indeterminism" />
<br />
<img src="http://ift.tt/1GnIxXS" alt="free will determinism and indeterminism" />
<br />
<img src="http://ift.tt/1GnIxXS" alt="free will determinism and indeterminism" />
</div>
<br />
<ul class="b">
<li><img src="http://ift.tt/1CjjS0t" alt="daniel wegner's conditions of human action" /></li>
<li><img src="http://ift.tt/1CjjS0t" alt="daniel wegner's conditions of human action" /></li>
</ul>

Example page (I included the ul column just for comparison): http://ift.tt/1GnIxXU