Рамки с подписями для картинок разного размера

[Megos]

Здравствуйте!

Есть несколько изображений разного размера с подписями. К ним через див добавляется рамка и фон. Подскажите, пожалуйста, как можно эти изображения выровнять по центру? Сложность в том, что для того, чтобы рамка не расползалась на весь экран, а была только вокруг картинок, я использую float, а тогда пропадает выравнивание, которое работает при указании точного размера дива без float. Но указывать точный размер я не могу, так как он все время разный.

То есть для меня есть 2 способа решения, которые я никак не могу найти:

1. Либо смогу выровнять по центру блоки c float.

2. Либо смогу заставить рамку без float держаться около картинок, а не расползаться на весь экран.

Код 1 c float:

<style>
img {border: 0;}
.caption {border: 1px solid red; padding: 5px; float:left; clear: both; margin: 10px 0px; background: #CCCCCC; position:relative;}
.caption-text {text-align: center; padding-top: 5px;}
</style>


<div align="center">
<div class="caption"><img title="" src="../bathroom-in-green-tile-shower.jpg" alt="" width="338" height="455" /><div class="caption-text">Text</div></div>

<p align="justify" style="clear: both;">img {border: 0}
.caption {border: 1px solid red; padding: 5px; margin: auto; float: left; clear: both; margin: 10px 0px; background: #CCCCCC;}
.caption-text {text-align: center; padding-top: 5px;}</p>

<div class="caption"><img title="" src="../bathroom-in-green-tile-shower.jpg" alt="" width="338" height="455" /><div class="caption-text">Text</div></div>
</div>

Код 2 без float:

<style>
img {border: 0;}
.caption {border: 1px solid red; padding: 5px; margin: 10px 0px; background: #CCCCCC; position:relative;}
.caption-text {text-align: center; padding-top: 5px;}
</style>


<div align="center">
<div class="caption"><img title="" src="../bathroom-in-green-tile-shower.jpg" alt="" width="338" height="455" /><div class="caption-text">Text</div></div>

<p align="justify" style="clear: both;">img {border: 0}
.caption {border: 1px solid red; padding: 5px; margin: auto; float: left; clear: both; margin: 10px 0px; background: #CCCCCC;}
.caption-text {text-align: center; padding-top: 5px;}</p>

<div class="caption"><img title="" src="../bathroom-in-green-tile-shower.jpg" alt="" width="338" height="455" /><div class="caption-text">Text</div></div>
</div>

[Searcher]

Может это поможет: http://www.alexilin.ru/cross-browser-inline-block/

[Megos]

Может это поможет: http://www.alexilin.ru/cross-browser-inline-block/

Спасибо, помогло.

[Searcher]

Пожалуйста! ))