CSS Горизонтальное выравнивание изображений с названиями изображений

Наша организация работает в системе управления контентом, и по ускоренным причинам мы организовали снимки с использованием таблиц. Я хотел бы уйти от этой практики и предоставить дорожную карту (CSS), чтобы делать это правильно.

Мы размещаем фотографии рядом друг с другом с заголовком под картинкой, обычно двумя строками текста.

Вот пример того, что я начинаю строить.

<style>

 #piccaption
 {
font-size: x-small;
 }

 #picimages
 {
 text-align:center;
 margin:0px auto; 
 }

#picimages a
{
margin:0px 0px;
display:inline-block;
text-decoration:none;
color:black;
}

</style>

Используя это с моим HTML...

<div id="picimages">
<img alt="Picture ALT" src="http://webaddress.com/picture.jpg" width="140px" height="203px" />
<div id="piccaption"><span>Picture Caption</span><br />
<span>Second Line</span></div>
</div>
</div>

Может ли кто-нибудь помочь мне с правильным способом сделать это, а также разместить второе, третье изображение рядом с этим первым, с приятным дополнением между картинками?

Благодаря,

Дейв