【问题标题】：Vertically align 3 images垂直对齐 3 个图像
【发布时间】：2017-05-09 20:48:36
【问题描述】：

我有 3 张图像想要垂直对齐，但我似乎无法让它正常工作。我的图像从 1 个现有图像分成 3 个部分。您可以看到从一张图像到另一张图像的轻微过渡。我在这里错过了什么？

HTML：

    <div id="Wrapper" class="Wrapper">
        <div id ="image-1">
            <img id="top" src="http://www.crystalcave.nl/wp-content/themes/shop-isle/top.png" class="jscolor border="0">
        </div>
        <div id ="image-2">
            <img id="mid" src="http://www.crystalcave.nl/wp-content/themes/shop-isle/mid.png" class="jscolor border="0">
        </div>
        <div id ="image-3">
            <img id="bot" src="http://www.crystalcave.nl/wp-content/themes/shop-isle/bot.png" class="jscolor border="0">
        </div>
    </div>

JS 小提琴：https://jsfiddle.net/krvrp7eb/

【问题讨论】：

标签： html css image alignment vertical-alignment

【解决方案1】：

使用position: relative; 并使用top、left 和right 来调整它的位置。

【讨论】：

【解决方案2】：

为什么会这样？

img 是一个 inline 元素，inline 元素像文本一样流动。小空白是由于这个原因。可能的解决方案：

将显示从 inline 更改为其他 - 例如添加 display: block
将vertical-align 属性更改为top（默认为baseline）
在 inline 元素的包含块上通过 font-size: 0 将文本大小缩小为 0。

示例

将vertical-align: top 添加到所有三个图像 - 请参阅下面的updated fiddle here 和sn-p：

#image-1 img,
#image-2 img,
#image-3 img {
  background-color: #00f;
  vertical-align: top;
}
.image-1,
.image-2,
image-3 {
  display: block;
}
.Wrapper {
  vertical-align: middle;
  display: block;
}

<div id="Wrapper" class="Wrapper">
  <div id="image-1">
    <img id="top" src="http://www.crystalcave.nl/wp-content/themes/shop-isle/top.png" class="jscolor" border="0">
  </div>
  <div id="image-2">
    <img id="mid" src="http://www.crystalcave.nl/wp-content/themes/shop-isle/mid.png " class="jscolor" border="0">
  </div>
  <div id="image-3">
    <img id="bot " src="http://www.crystalcave.nl/wp-content/themes/shop-isle/bot.png " class="jscolor" border="0">
  </div>
</div>

【讨论】：

为澄清起见，字体大小应在父级上调整，在这种情况下是包装器，而不是 img 本身。
@ovokuro 当然是 包含块 或包装器...感谢您指出...
很抱歉，我的解释有误。我并没有被图像之间的小空白所困扰，我已经在我的网站上得到了那个部分，但是我的图像两侧的小过渡带有小边缘。如果您仔细观察，如果图像是“完整的”，您会看到类似边缘的形状。也很抱歉很晚才回复。圣诞节和所有：D
没问题...我能够在我的 Android 浏览器中围绕每张图像获得 faint 边框/轮廓 - 你猜你是在说这个吗？看起来这是由于浏览器中的图像 rendering...

【解决方案3】：

只需在其中添加一个 css 属性

image-1 图像，#image-2 图像，#image-3 图像

到

浮动：左；

【讨论】：

【解决方案4】：

将以下内容添加到您的 CSS：

.Wrapper {
    font-size:0;
}

JSFIDDLE

【讨论】：