jquery - 如何在页面中居中 Diaporama

Question

我使用来自 http://www.guillaumevoisin.fr/ 的立体透视图运行 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 中……但没有任何效果。我找到它的唯一方法是，但我在第一张图片上看到了所有集团的幻灯片。我有几个宽度......我尝试下载最新版本但链接被禁用......有人可以帮助我吗？即使我需要更换隔膜。我只想要一个 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%);
}