Question

只是想知道如何在容器内缩小和集中一堆动态生成的图像。

前言：我不是设计师。

我希望页面最终看起来像这样：这是它目前的样子： http://www.nickysfolders.com/nicky-s-communicator-english.aspx?SessionThemeID=34

这是我的css：

.product-wrapper{
  position: relative;
  width: 40vw;
  height: 23vw;
  background-color: lightgray;
}

.cent {
  text-align: center;
  position:absolute;
  max-height: 100%;
}

这是我的HTML：

<div class="product-wrapper">
<div class="cent">
            <ac:layoutarea id="PhotoArea">
              <a href="$$LINKHREF$$" itemprop="image" class="main-product-photo block zoom rel">
                $$MAINPHOTO$$
                <!--<div class="caption">$$CAPTION$$</div>-->
              </a>
              <ac:visibilityarea id="lvCarousel">
                <div class="pad-20 no-pad-lr">
                  $$THUMBNAILS$$
                </div>
              </ac:visibilityarea>
            </ac:layoutarea>
            <ac:layoutarea id="PhotoThumbLayout">
              <ul class="product-thumbnails no-padding">$$GROUP$$</ul>
            </ac:layoutarea>
            <ac:layoutarea id="PhotoThumbGroup">
              $$ITEM$$
            </ac:layoutarea>
            <ac:layoutarea id="PhotoThumb">
              <li class="no-padding"><a href="$$THUMBLINKHREF$$" class="thumbnail">$$THUMBNAIL$$</a></li>
            </ac:layoutarea>
            <ac:visibilityarea id="Featured">
              <div class="abs product-flag left top featured"><span>Featured!</span></div>
            </ac:visibilityarea>
            <ac:visibilityarea id="Spotlight">
              <div class="abs product-flag left bottom spotlight"><span>Spotlight!</span></div>
            </ac:visibilityarea>
            <ac:visibilityarea id="Flag1">
              <div class="abs product-flag right top flag1"><span>New!</span></div>
            </ac:visibilityarea>
            <ac:visibilityarea id="Flag2">
              <div class="abs product-flag right bottom flag2"><span>Hot!</span></div>
            </ac:visibilityarea>
            <ac:visibilityarea id="Flag3">
              <div class="abs product-flag right bottom flag3"><span>Sale!</span></div>
            </ac:visibilityarea>

</div>
</div>

我在一个名为americommerce的托管cms中工作，请救我。

如果我能提供其他可能有用的内容，请告诉我。

谢谢各位朋友。

Answer 1

从查看您的网站。你所要做的只是添加一个 text-align:center;到.cent班。{/ 1>

缩小容器中的一组动态生成的图像并使其居中

1 个答案: