如何將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中...但沒有。 我發現它的唯一方法，但我看到第一張照片上的所有團體幻燈片。我有幾個寬度...我嘗試下載最新版本，但鏈接被禁用...有人可以幫助我嗎？即使如果我需要改變diaprama。我只想要一個可以點擊並居中顯示圖片的照片。

更新： 這裏生成的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%); 
}