ItemTemplate in Listview - Layout issue - asp.net

Question

I have the following Listview in my aspx page
<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>
The resulting webpage displays my image with the link button beside it. What I would like is the image with the Linkbutton centered below it for each item.
Can someone help me out with the necessary html or css to achieve this.

Answer 1

Try the following html inside ItemTemplate
<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>
The above code will show divs side by side. So inorder to show 4 divs add with (800px) to your items in list view.
If you don't get the linkbutton at center add some margin-left to it to show it at center.

Answer 2

Try this:
<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>