централизовать изображения в div?

Question

У меня есть div, который может содержать от одного до четырех изображений.Если изображений меньше четырех, они выравниваются по левому краю.Я хочу выровнять их по центру содержащего 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>

Сайт, над которым я хочу работать, можно найти здесь .

Answer 1

добавить это в таблицу стилей CSS

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

Добавьте класс и замените теги

на div, как показано ниже:

<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>

Answer 2

Добавьте стиль CSS margin: 0 auto; к вашему div #bigImg.Это центрирует содержимое.