html - 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

如果没有float分配 img 标签，那么只需添加text-align : centerto 即可div解决问题。

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

编辑 ：

检查这个演示：演示

Answer 2

要在 DIV 中居中图像：

1. 从 DIV 中删除 align="center"
2. 添加css样式“text-align:center;” 到 DIV。
3. 删除“位置：绝对；底部：0；” 来自 DIV。

那应该这样做。