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

I'm trying to align some text above and below an image. This set the images up nicely with the text hugging the top of the image, but the text below the image has a large space.

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

I would like it to again, hug the bottom of the image.

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

I've tried various solutions on here but to no avail.

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

SCREEN SHOT

屏幕拍摄

Here's what I currently have.

这是我现在拥有的。

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

Then the HTML

然后是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>

Your expertise is appreciated!

感谢您的专业知识！

4 个解决方案

#1

This is what I now have, but it doesn't seem to make a difference.

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

I'm sure this is really simple, but it's got me stumped. I just want the text below the image to be the same distance from the bottom as the text on the 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;
}

#2

Just add margin-top to your div.idesc rule and set it to whatever size you want the bottom text to be away from a picture. Like so:

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

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

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

#3

My previous answer would never have worked... I have amended the CSS to this:

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

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

Also, please note that you need to close the last igallery div at the end of your HTML code snippet by adding </div>, though I do appreciate if this was just a mistake with copy/paste.

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

After discovering you are working with a wordpress theme, the above code may or may not work to the desired affect. However, to inspect this issue further, you need to delve into the Developer Tools, more info for Chrome here. This is the best way to find any CSS conflicting with your layout. From doing this, you can then counteract the rules. At a guess though, the two statements you may need are as the code above: padding-top and margin-top.

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

#4

I've made the changes, but to no avail.

我做了改变，但无济于事。

I've had a look at the code being outputted. It seems that a p tag is being inserted for the img tag and that's outputting the box at 60 x 48 creating the gap at the bottom of the image.

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

You can see it here.

你可以在这里看到它。

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

Not sure what to use though to get rid of it.

不知道该怎么用才能摆脱它。

#1