Css 对齐图像上方和下方的文本

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

我希望它再次拥抱图片的底部

我在这里尝试了各种解决方案，但都没有用

截屏

这是我目前拥有的

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>

F2类
8米
镜头
25
期间
0:30秒

---

感谢您的专业知识

只需将

margin top

添加到

div.idesc

规则中，并将其设置为希望底部文本远离图片的任何大小。像这样：

div.igallery{
保证金：2倍；
浮动：左；
宽度：60px；
}
伊加莱里分区img{
显示：块；
保证金：0自动；
}
idesc分区{
字体大小：10px；
填充：2px；
文本对齐：居中；
}

F2类
8米
镜头
25
期间
0:30秒

我以前的答案永远不会奏效。。。我已将CSS修改为：

.idesc:last-child { 
  padding-top: 0 !important;
  margin-top: 0 !important;
}

另外，请注意，您需要通过添加

来关闭HTML代码段末尾的最后一个igallery div，不过如果这只是复制/粘贴的一个错误，我会非常感激。

---

在发现您正在使用wordpress主题后，上述代码可能会也可能不会达到预期效果。然而，为了进一步检查这个问题，您需要深入研究开发人员工具，更多信息。这是找到与布局冲突的CSS的最佳方法。通过这样做，您可以抵消规则。不过，我猜，您可能需要的两个语句与上面的代码相同：

padding top

和

margin top

这是我现在拥有的，但似乎没有什么区别

我相信这很简单，但它让我感到困惑。我只希望图像下方的文本与顶部的文本与底部的距离相同

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;
}

---

我做了些改变，但没有用

我已经看过了输出的代码。似乎正在为img标记插入一个p标记，并以60 x 48的速度输出框，从而在图像底部创建间隙

你可以在这里看到

---

不确定要用什么来摆脱它。

它似乎会将它们移得更远，但使用2px值不会使文本更近。@MDJ1，是的，10px的边距顶部会将文本移得离图像更远，根据屏幕截图，我认为您是在追求这一点。您希望底部文本远离图像还是靠近图像？老实说，这真的很简单，你所要做的就是调整你的填充或边距。对不起，这张图片应该显示它现在的样子。我想要的是底部文本与顶部文本的距离相同，但我似乎无法做到这一点。@MDJ1，您最初发布的代码显示的顶部和底部文本的距离相同，即顶部和底部文本周围有2倍的填充。我在Chrome、Edge、IE和Firefox上确认了这一点。在什么环境下它不显示相同的距离？您是否可能没有包含所有将覆盖最初发布的规则的相关代码？目前，您在屏幕截图中发布的问题无法在桌面浏览器上复制，并且最初发布的代码是正确的。我已经做了更改，但没有效果。我已经看过了输出的代码。似乎正在为img标记插入一个p标记，并以60 x 48的速度输出框，从而在图像底部创建间隙。你可以在这里看到。但不确定要用什么来摆脱它。请检查与图像本身相关的样式，和/或查看相关的页边距和填充。另外，请尝试设置行高：在图标图像上的首字母，这对我来说是一个奇怪的问题，因为pastI无法复制您的问题。请在代码中使用JSFIDLE重新创建您的问题。您是对的。我刚刚完成了一个JSFIDLE（第一个计时器），它输出正确。那么，是什么导致了这种差距呢？不知道如何在这里添加JSFIDLE@MDJ1您还使用哪些其他css？可能与其他样式表有冲突…这是woocommerce的wordpress主题，因此可能会有所有css文件，因为img不是这样命名的。你认为可能是这样吗？嗨。这似乎没有什么区别。这就是我现在拥有的。div.igallery{margin:2px；float:left；width:60px；}div.igallery img{display:block；margin:0 auto；}div.igallery>div.idesc:n子级（2）{padding top:0！重要；}div.idesc{font size:10px；padding:2px；text align:center；}