css - 对齐图像上方和下方的文本

Question

我正在尝试对齐图像上方和下方的一些文本。这很好地设置了图像，文本紧贴图像顶部，但图像下方的文本有很大的空间。

我想再次拥​​抱图像的底部。

我在这里尝试了各种解决方案，但都无济于事。

屏幕截图

这是我目前拥有的。

div.igallery {
margin: 2px;
float: left;
width: 60px;
}

div.igallery img {
display: block;
margin: 0 auto;
}

div.idesc {
font-size:10px;
padding: 2px;
text-align: center;
}

然后是 HTML

<div class="igallery">
<div class="idesc">Category F2</div>
<img title="Category F2 :: 8 Metres" src="/img/icons/safety.jpg" alt="Category 
 F2 :: 8 Metres" width="48" height="48" border="0" /><div class="idesc">8 Metres</div>

</div>
<div class="igallery">
<div class="idesc">Shots</div>
<img title="Shots :: 25" border="0" alt="Shots :: 25" src="/img/icons/shots.jpg" width="48" height="48" />
<div class="idesc">25</div>

</div>
<div class="igallery">
 <div class="idesc">Duration</div><img title="Duration :: 30s" src="/img/icons/clock.jpg" alt="Duration :: 30s" width="48" height="48" border="0" />
<div class="idesc">0:30s</div>

感谢您的专业知识!

Answer 1

这就是我现在拥有的，但它似乎并没有什么不同。

我敢肯定这真的很简单，但它让我难住了。我只希望图像下方的文字与底部的距离与顶部的文字的距离相同。

div.igallery {
margin: 2px;
float: left;
width: 60px;
}

div.igallery img {
display: block;
  margin: 0 auto;
}

div.igallery > div.idesc:nth-child(2) {
  padding-top: 0 !important;
}

div.idesc {
font-size:10px;
padding: 2px;
text-align: center;
}