Question

我有一个带有项目模板的数据列表。

 <asp:DataList ID="DataList1" Width="100%" runat="server" RepeatColumns="3" RepeatDirection="Horizontal">
  <ItemTemplate >
     <div style="text-align:center;margin-bottom:5px;vertical-align:bottom;clear:both">  <a href='<%# Eval("Url") %>' rel='prettyPhoto[gallery1]' style='margin:10px;margin-bottom:0px; text-align: center'> <img src='<%# Eval("Url") %>' width='180'  /></a>
      <br /><label ><%# Eval("Name") %></label>  </div>
   </ItemTemplate>
  </asp:DataList>

我为此设置数据源。

我的图片有不同的宽度和高度。

当我运行这个时，我的图像设置了div的中心，但我想设置div的底部。

我用

垂直对齐：底部;

但不要设置vertical-align。

Answer 1

您需要对vertical-align或inline元素应用inline-block。看看这个：http://jsfiddle.net/6HuF9/

Answer 2

将div的显示设置为内联块

display: inline-block;

Answer 3

尝试对图片进行margin-bottom:0px;。

不要在div中为element设置vertical-align

3 个答案: