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>

我希望这个网站能够找到here。

Answer 1

将css风格的margin: 0 auto;添加到div [{1}}。这是内容的中心。

Answer 2

将此添加到css样式表

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

添加类并替换＆lt;中心＆gt; 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>

在div中集中图像？

2 个答案: