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

Question

我试图在图像上方和下方对齐某些文字。这样可以很好地将图像设置为拥抱图像顶部的文本，但图像下方的文本空间很大。

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

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

SCREEN SHOT

这是我现在所拥有的。

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

只需将margin-top添加到您的div.idesc规则中，然后将其设置为您希望底部文字远离图片的大小。像这样：

＆＃13;

＆＃13;

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

＆＃13;

<div class="igallery">
<div class="idesc">Category F2</div>
<img title="Category F2 :: 8 Metres" src="https://pbs.twimg.com/profile_images/469017630796296193/R-bEN4UP.png" 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="https://pbs.twimg.com/profile_images/469017630796296193/R-bEN4UP.png" width="48" height="48" />
<div class="idesc">25</div>

</div>
<div class="igallery">
 <div class="idesc">Duration</div><img title="Duration :: 30s" src="https://pbs.twimg.com/profile_images/469017630796296193/R-bEN4UP.png" alt="Duration :: 30s" width="48" height="48" border="0" />
<div class="idesc">0:30s</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我以前的回答永远不会奏效......我已经将CSS修改为：

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

另请注意，您需要通过添加</div>来关闭HTML代码段末尾的最后一个igallery div，但我很感激，如果这只是复制/粘贴的错误。

在发现您正在使用wordpress主题后，上述代码可能会或可能不会达到预期的效果。但是，要进一步检查此问题，您需要深入研究开发人员工具，Chrome here的更多信息。这是查找与布局冲突的任何CSS的最佳方法。通过这样做，您可以抵制规则。但我们猜测，您可能需要的两个语句如上面的代码所示：padding-top和margin-top。

Answer 3

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

我确信这很简单，但这让我很难过。我只是希望图像下方的文本与底部的文本距离顶部的文本相同。

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

Answer 4

我已做出改变，但无济于事。

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

你可以在这里看到它。

http://www.fireworksfireworksfireworks.co.uk/product/happy-trolls/

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