Question

我的aspx页面中有以下Listview

<asp:ListView ID="ListView1" GroupItemCount="4" runat="server" 
     DataKeyNames="contentid" DataSourceID="sqldsPhotos">
<LayoutTemplate>
    <asp:Placeholder
    id="groupPlaceholder"
    runat="server" />
</LayoutTemplate>
<GroupTemplate>
    <div>
    <asp:Placeholder
    id="itemPlaceholder"
    runat="server" />
    </div>
</GroupTemplate>
<ItemTemplate>

    <asp:Image id="picAlbum" runat="server" 
         ImageUrl='<%# "ShowImage.ashx?id=" + Convert.ToString(Eval("contentid")) %>'   
         Height="108" Width="192" />
    <asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>
    </ItemTemplate>
<EmptyItemTemplate>           

</EmptyItemTemplate>
</asp:ListView>

生成的网页显示我的图片，旁边有链接按钮。我想要的是每个项目下方Linkbutton居中的图像。

有人可以用必要的html或css来帮助我实现这个目标。

Answer 1

在ItemTemplate

中尝试以下html

<div style="float: left; margin-left: 10px; text-align:center;width: 192; ">
    <asp:Image id="picAlbum" runat="server" 
         ImageUrl='<%# "ShowImage.ashx?id=" + Convert.ToString(Eval("contentid")) %>'   
         Height="108" Width="192" />
    <asp:LinkButton ID="LinkButton1" runat="server"
         style="display: block; clear: both;">LinkButton</asp:LinkButton>
</div>

上面的代码将并排显示div。因此，为了显示4个div，请在列表视图中添加（800px）项目。

如果您没有在中心添加链接按钮，请向其添加一些margin-left以将其显示在中心。

Answer 2

试试这个：

<div style="width: 192px; text-align:center;">
    <asp:Image id="picAlbum" runat="server" 
         ImageUrl='<%# "ShowImage.ashx?id=" + Convert.ToString(Eval("contentid")) %>'   
         Height="108" Width="192" /><br/>
    <asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>
</div>

列表视图中的ItemTemplate - 布局问题

2 个答案: