Div标签中的居中元素

Question

我在div中有一个图像。我想在div中为图像设置垂直对齐底部和水平对齐中心。

到中心元素我使用对齐但我的元素设置正确的位置。

  <asp:Repeater ID="product" runat="server">
  <ItemTemplate>
  <div style="float: right; width: 180px; height: 177px; margin: 0 30PX 10px 5px">
     <asp:Panel ID="Panel1" runat="server">
        <font color="white">
        <asp:Label ID="Label1" runat="server" Text='<%# Eval("Name") %>'></asp:Label></font>
        <br />
        <div style="height:140px ; overflow:hidden">
           <asp:Image ID="Image1"  runat="server"  Width="120px" ImageUrl='<%#  Eval("Image") %>' ImageAlign="Bottom" />
       </div>
      </asp:Panel>
 </div>
  </ItemTemplate>

示例：

Answer 1

如果img标记未分配float，则只需将text-align : center添加到div即可解决问题。

<div style="text-align:center">
    <asp:Image runat="server" ID="Image1" Width="140px" ImageUrl="" />
  </div>

编辑：

查看此演示：demo

Answer 2

将图像置于DIV中心：

1. 从DIV中删除align =“center”
2. 添加css样式“text-align：center;”到DIV。
3. 删除“position：absolute; bottom：0;”来自DIV。

应该这样做。