centering a series of images

This took me for-freaking-ever to figure out. I don't understand why seemingly simple solutions (like align="center") never freaking work the way I expect them to, damn it.

Anyway, I wanted to horizontally center two images side by side, without using a table. (I hate tables. They're terribly useful, but they're such mountains of code. And the site I'm working within has stupid formatting for them.) Nothing seemed to work until I put them in a paragraph and used this display:block thingie...


.center {
display:block;
margin-left:auto;
margin-right:auto;
}


<p class="center" align="center">

<a href="site/pic.jpg" target="_new">

<img src="site/pic.jpg" style="width:47%; box-shadow:5px 5px 15px #D2D2D2; margin:1.25%; padding:0;" />

</a>

<a href="site/pic2.jpg" target="_new">

<img src="site/pic2.jpg" style="width:47%; box-shadow:5px 5px 15px #D2D2D2; margin:1.25%; padding:0;" />

</a>

</p>

And I finally got them to show up like this...

Ta-da!