Html 在<；部门>；标签_Html_Css_Image

Html 在<；部门>；标签

html css image

Html 在<；部门>；标签,html,css,image,Html,Css,Image,我注意到，当同时使用行高和文本对齐属性将标记内的图像居中并垂直对齐时，由于某种原因，图像会向下压几个像素。如果您的图像周围有大量空白，则很难注意到这种变化，但是当我在150px150pxby150pxbyby150px大小的框中有一个150px图像时，您可以看到图像被稍微挤出的位置。有人知道为什么会这样吗但是：您可以添加垂直对齐：中间。这与将图像视为角色有关。我认为默认值是verticalalign:baseline，它似乎在底部添加了类似3px的soemthing 垂直对齐：中间的定义有

我注意到，当同时使用

行高

和

文本对齐

属性将

标记内的图像居中并垂直对齐时，由于某种原因，图像会向下压几个像素。如果您的图像周围有大量空白，则很难注意到这种变化，但是当我在

150px150pxby150pxbyby150px
大小的框中有一个150px
图像时，您可以看到图像被稍微挤出的位置。有人知道为什么会这样吗
但是：
您可以添加垂直对齐：中间。
这与将图像视为角色有关。我认为默认值是verticalalign:baseline
，它似乎在底部添加了类似3px的soemthing
垂直对齐：中间的定义有点奇怪
“将长方体的垂直中点与父长方体的基线加上父长方体x高度的一半对齐。”
您看到的移动是“父项x高度的一半”和基线移动的组合效果，两者都基于字体大小。因此，您可以通过将父级的字体大小（在JSFIDLE.searchLogo
中）设置为零来消除它。这使得x高度=0，基线穿过盒子的中心线，并且没有移动
请参阅
一些代码或JSFIDLE可能会有帮助。例如，您是否可以提供一个发生这种情况的示例？@Diodeus不，这不是重复的，我是针对我自己的问题问一个问题。您有可用的小提琴吗？请在这里提供一个链接。这不是我真正的问题。如果我能找到一张图片来使用，我会提供一个例子，但使用链接作为src并不适用于一些奇怪的原因，好吧，我明白了。试着用小提琴演奏，我会试着得到一个更好的答案！我们在这里，有点显示了问题，正如你可以看到问题在旗帜上被注意到，但是在全尺寸图像上你可以看到问题是可以注意到的。我会尝试一下，但我可以问一下为什么线高度属性会导致它反弹？先生，你是个天才。一个问题，alt标签呢？他们会受到影响吗？放弃最后一个问题，你的解决方案让我找到了解决办法。我已将徽标存储在一个框中，因此我已将
标记CSS属性设置为字体大小：0和行高：150px.divimg{}
并把font:12px Arial和垂直对齐：中间，现在解决了没有alt标记和对齐问题。如果有人能找到一种方法来使用此答案作为所有对齐问题的答案，那就是将您的图像包装在div
中，并将属性设置为该标记的图像。