Question

我有一系列产品缩略图，下面是产品文字。见here

由于图像具有不同的高度，因此文本并不总是在正确的位置垂直对齐。我只是将表格从表格更改为div，因为它更容易，更现代。

我已经完成了几个例子，网站和这个网站，但仍然找不到正确对齐的方法。我喜欢在div中间对齐的图像和最底部的文本。

这里是DIV代码（非常简单）：

<div style="float:left; width:210px; height:200px; text-align:center;" >
    <a title="Alton Banquette" href="http://test.pillarsoflifebook.com/banquettes/designer-banquettes/alton-banquette/"><img  alt="" src="/wp-content/uploads/2013/10/ALTON-SETTEE_THUMB.gif" width="150" height="150" border="0" /></a>
Alton Banquette
</div>

它在this page上工作正常，因为图像的高度都相同

有一个简单的解决方案吗？我更喜欢DIVS，但是因为我可以使用valign=center等所有东西都是表格单元格，所以这不是问题。

谢谢！

Answer 1

始终指定一个类并组织代码，始终包装文本以避免故障：

<div class="wrap" >  

<a title="Alton Banquette" href="http://test.pillarsoflifebook.com/banquettes/designer-banquettes/alton-banquette/">
    <img  alt="" src="/wp-content/uploads/2013/10/ALTON-SETTEE_THUMB.gif" width="150" height="150" border="0" />
</a>
<p>Alton Banquette</p>   

</div>
.wrap
{
    float:left; width:210px; height:200px; text-align:center;
}
}
.wrap p
{

  display:block;

}
img
{
    height:100% !important;
    width:auto;
}

Fiddle Demo

因此，无论何时更改图像高度，文本都将始终保持在底部。

在Div Box中的图像下垂直对齐文本？

1 个答案: