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>