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

【问题标题】：Aligning text above and below an image对齐图像上方和下方的文本
【发布时间】：2018-10-05 07:28:31
【问题描述】：

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

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

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

屏幕截图

这是我目前拥有的。

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>

感谢您的专业知识！

【问题讨论】：

检查与图像本身相关的样式，和/或查看涉及的边距和填充。还可以尝试在您的图标图像上设置 line-height: initial ，这对我来说过去是一个奇怪的问题
我无法复制您的问题。请您可以通过将 jsfiddle 与您的代码一起使用来重新创建您的问题。
你是对的。我刚刚做了一个 jsfiddle（第一个计时器），它输出正确。那么造成差距的原因是什么？不确定如何在此处添加 Jsfiddle？ jsfiddle.net/mdj101/Lxv3g5ex
@MDJ1 你还用什么其他的css？可能是与其他样式表冲突的问题...
它是 woocommerce 的 wordpress 主题，因此可能存在所有 css 文件的庄园，因为 img 不是这样命名的，您认为可能是这样吗？

标签： css image text

【解决方案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;
}

【讨论】：

【解决方案2】：

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

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>

【讨论】：

似乎将它们移得更远，但使用 2px 的值不会使文本更靠近。
@MDJ1，是的，10px 的 margin-top 会使文本远离图像，根据你的屏幕截图，这就是我认为你所追求的。你想让你的底部文字远离图像还是靠近它们？老实说，这真的很简单，您所要做的就是调整您的填充或边距。
对不起，图片应该显示现在的样子。我想要的是底部文本与顶部文本的距离相同，但我似乎无法做到这一点。
@MDJ1，您最初发布的代码显示顶部和底部文本的距离相同，即顶部和底部文本周围的 2px 填充。我在 Chrome、Edge、IE 和 Firefox 上确认了这一点。在什么环境下显示的距离不一样？您是否可能没有包含所有将覆盖您最初发布的规则的相关代码？就目前而言，您在屏幕截图中发布的问题无法在桌面浏览器上复制，并且最初发布的代码是正确的。
我进行了更改，但无济于事。我已经查看了正在输出的代码。似乎正在为 img 标签插入一个 p 标签，并以 60 x 48 的尺寸输出框，从而在图像底部创建间隙。你可以在这里看到它。 fireworksfireworksfireworks.co.uk/product/happy-trolls 不知道用什么来摆脱它。

【解决方案3】：

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

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

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

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

【讨论】：

嗨。这似乎没有任何区别。这就是我现在所拥有的。 div.igallery { 边距：2px;向左飘浮;宽度：60px； } div.igallery img { 显示：块；边距：0 自动； } div.igallery > div.idesc:nth-child(2) { padding-top: 0 !important; } div.idesc { 字体大小：10px;填充：2px；文本对齐：居中； }

【解决方案4】：

我已经进行了更改，但无济于事。

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

你可以在这里看到。

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

不知道用什么来摆脱它。

【讨论】：