div 內圖片置中(相簿封面效果)

每個網站常用到的div照片封面置中的方法，
我的每張thumb為100*100大小內的等比例縮圖。
所以最外圍的div.albumCover設定110*110大小，
就可以很漂亮的顯示了!!。

#listDiv
{
   width:100%;
   background:#fff;
   padding:10px;
}


#listDiv:after
{
 content: ".";
 display: block;
 clear: both;
 height: 0;
 overflow: hidden;
 visibility: hidden;
}

#listDiv ol li
{
     display: inline;
     float: left;
     text-align: center;
     margin-right: 15px;
     margin-bottom: 10px;
     overflow: hidden;
     background-color:#FFFFFF;
}

#listDiv ol li a
{

}

#listDiv ol li a:hover
{

}

/*album title desc*/
#listDiv ol li a span.albumTitle
{
 font-size : 12px;
 display: block;
 text-align: left;
 padding-left: 3px;
 padding-top: 3px;
 padding-bottom: 3px;
}

/*album cover*/
#listDiv ol li div.albumCover
{
 display: table-cell;
 border:1px solid #CCCCCC;
 width:110px;
 height:110px;
 vertical-align:middle;
 text-align:center;
}

#listDiv ol li div.albumCover:hover
{
  background-color:#B0C4DE;
}

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
 <h2>相簿標題:<asp:Label ID="lblAlbumTitle" runat="server"></asp:Label></h2>
<div id="photoList">
<asp:ListView ID="ListView1" runat="server"
     DataSourceID="SqlDataSourcePhotoList" >
     <EmptyDataTemplate>
         <div class="icon-yellow">Sorry 目前相簿無照片</div>
     </EmptyDataTemplate>
     <ItemTemplate>
         <li>
             <a href="activity-photo-show.aspx?aid=<%#Eval("ActivityPhotoAID")%>&pid=<%#Eval("ActivityPhotoID")%>">
                 <div class="albumCover">
                    <img src="<%#AlbumCover(Eval("ActivityAlbumDirectory").ToString(),Eval("ActivityPhotoFile").ToString())%>" alt="<%#Eval("ActivityAlbumTitle")%>"/>
                    <%-- <img src="photo/default.gif" />--%>
                 </div>
             </a>
         </li>
     </ItemTemplate>
     <AlternatingItemTemplate>
         <li>
             <a href="activity-photo-show.aspx?aid=<%#Eval("ActivityPhotoAID")%>&pid=<%#Eval("ActivityPhotoID")%>">
                 <div class="albumCover">
                     <img src="<%#AlbumCover(Eval("ActivityAlbumDirectory").ToString(),Eval("ActivityPhotoFile").ToString())%>" alt="<%#Eval("ActivityAlbumTitle")%>"/>
                     <%--<img src="photo/default.gif" />--%>
                 </div>
             </a>
         </li>
     </AlternatingItemTemplate>
     <LayoutTemplate>
         <div id="listDiv">
             <ol>
                 <asp:PlaceHolder ID="itemPlaceholder" runat="server" />
             </ol>
         </div>
         <div class="Pagination">
             <asp:DataPager ID="_moviesGridDataPager" runat="server" PageSize="20">
                 <Fields>
                          <asp:NumericPagerField CurrentPageLabelCssClass="pagerlabel" NextPageText="..."
                                     NextPreviousButtonCssClass="pagerlink" NumericButtonCssClass="pagerlink"
                                     PreviousPageText="..."/>       
                 </Fields>
             </asp:DataPager>
         </div>
     </LayoutTemplate>
</asp:ListView>
 <asp:SqlDataSource ID="SqlDataSourcePhotoList" runat="server"
     ConnectionString="<%$ ConnectionStrings:CSIEFriendsConnectionString %>"
     SelectCommand="SELECT ActivityAlbumTitle,ActivityPhotoID, ActivityPhotoAID, ActivityPhotoFile,ActivityAlbumDirectory FROM vw_ActivityPhotoList
Where ActivityPhotoAID=@aid">
     <SelectParameters>
         <asp:QueryStringParameter Name="aid" QueryStringField="aid" />
     </SelectParameters>
 </asp:SqlDataSource>
 <asp:SqlDataSource ID="SqlDataSourceGetAlbumTitle" runat="server"
     ConnectionString="<%$ ConnectionStrings:CSIEFriendsConnectionString %>"
     SelectCommand="SELECT [ActivityAlbumTitle] FROM [ActivityAlbum] WHERE ([ActivityAlbumID] = @ActivityAlbumID)">
     <SelectParameters>
         <asp:QueryStringParameter Name="ActivityAlbumID" QueryStringField="aid"
             Type="Int32" />
     </SelectParameters>
 </asp:SqlDataSource>
</div>
</asp:Content>