divに画像を集中管理しますか？

Question

私はdivを持っていますが、これは1〜4枚の画像を含むことができます。画像が4枚未満の場合は、左に揃えられます。どのくらいの数の画像があっても、画像リストが中央にくるように、それらを中心にして、divを整列させたいと思います。

<div id="bigImg" {if $ads_settings.enable_video && $listing.enable_video && $listing.video}style="display: none;"{/if}> 
    <center> 
     <a href="{$live_site}/images/listings/{$listing.images[0].picture}" class="thickbox" rel="image_gallery"> 
      <img src="{$live_site}/images/listings/bigThmb/{$listing.images[0].picture}" class="pic" onmouseover="this.className='pic_over';" onmouseout="this.className='pic'" alt="{$listing.title|strip_tags:false}" /> 
     </a> 
    </center> 
</div> 

私はこれが上の仕事をしたいサイトがhereを見つけることができます：

は、ここに私の現在のコードです。

Answer 1

margin: 0 auto;を#bigImgに追加してください。これは内容を集中させます。

Answer 2

クラスを追加し、<センターを置き換える>怒鳴るあたりなどのdivとタグCSSスタイルシートに

.bigimg div {margin: 0 auto;} 
.bigimg div img {text-align: center; float: left;} 

これを追加します。

<div id="bigImg" class="bigimg" {if $ads_settings.enable_video && $listing.enable_video && $listing.video}style="display: none;"{/if}> 
<div> 
    <a href="{$live_site}/images/listings/{$listing.images[0].picture}" class="thickbox" rel="image_gallery"> 
     <img src="{$live_site}/images/listings/bigThmb/{$listing.images[0].picture}" class="pic" onmouseover="this.className='pic_over';" onmouseout="this.className='pic'" alt="{$listing.title|strip_tags:false}" /> 
    </a> 
    </div> 
    </div>