Question

我使用来自http://www.guillaumevoisin.fr/的diaporama 运行diaporama是好的。但我尝试将我的图像集中在我的页面中。

 <ul class="diaporama1">
    <asp:Repeater ID="rptImg" runat="server">
        <ItemTemplate>
            <li>
                <div class="wrapper">
                    <img id='<%# Eval("Id")%>' src='<%# Eval("path") & "/" & Eval("Img")%>'
                        alt='<%# Eval("Alt")%>' title='<%# Eval("Title")%>' style="max-height: 320px;" />
                </div>
            </li>
        </ItemTemplate>
    </asp:Repeater>
</ul>

我尝试了几种方式与显示或文本对齐包括在div ...但没有。我发现它的唯一方法，但我看到第一张照片上的所有集团的幻灯片。我有几个宽度...我尝试下载最新版本但链接被禁用...有人可以帮助我吗？即使我需要改变diaprama。我只想要一个diaporama，我可以点击并居中我的照片。

更新：这里生成了html

<div style="width:960px;">
  <ul class="diaporama1">
    <li>
       <div class="wrapper">
         <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcT9l4Be-g7PvpIdSrBkt_G9iZkUvj-dsR4VfELe4nYy12ibVXvo"  style="max-height: 320px;" />
       </div>
    </li>
    <li>
      <div class="wrapper">
        <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSa9o33IgU9JNNYUW-gHhs5V8XXCsbbBeN3_UAO9Am7KbxakMVAZw"  style="max-height: 320px;" />
      </div>
    </li>
</ul>

和CSS

.wrapper {
margin:auto;
width:900px;
text-align:center;
}

更新2：我找到了更好的方法，

<div style="width:100%;">
    <div style="display: table;margin: 0 auto;">
        <ul class="diaporama1">
            <asp:Repeater ID="rptImg" runat="server">
                <ItemTemplate>
                    <li>
                        <div style="text-align: center;width:400px;">
                            <div style="display: inline-block;">
                                <img id='<%# Eval("Id")%>' src='<%# Eval("path") & "/" & Eval("Img")%>'
                                    alt='<%# Eval("Alt")%>' title='<%# Eval("Title")%>' style="max-height: 320px;max-width:400px;" />
                            </div>
                        </div>
                    </li>
                </ItemTemplate>
            </asp:Repeater>
        </ul>
    </div>
</div>

但是就在第一个显示器上，我看到一个向左移动的滑动装置......

Answer 1

强行尝试...... 我在同一时间找到垂直中心

 <div class="center-Accueil SizePhoto-Accueil">
    <ul class="diaporama1">
        <asp:Repeater ID="rptImg" runat="server">
            <ItemTemplate>
                <li>
                    <div class="SizePhoto-Accueil">
                        <div class="CenterImg">
                            <img id='<%# Eval("Id")%>' src='<%# Eval("path") & "/" & Eval("Img")%>'
                                alt='<%# Eval("Alt")%>' title='<%# Eval("Title")%>' style="max-height: 320px; max-width: 400px;" />
                        </div>
                    </div>
                </li>
            </ItemTemplate>
        </asp:Repeater>
    </ul>
</div>

我的css

.SizePhoto-Accueil {
width: 400px;
height: 320px;
}

.center-Accueil {
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
}

.CenterImg {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}

如何将Diaporama集中在一个页面中

1 个答案: