垂直对齐3张图像

Question

我有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/

Answer 1

将以下内容添加到CSS中：

.Wrapper {
    font-size:0;
}

JSFIDDLE

Answer 2

为什么会这样？

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

1. 将显示从inline更改为其他 - 例如添加display: block

2. 将vertical-align属性更改为top（默认为baseline）

3. 在内联元素的包含块上，font-size: 0将文字大小缩小为0。

示例

将vertical-align: top添加到所有三张图片中 - 请参阅下面的updated fiddle here和摘要：

＆＃13;
＆＃13;
#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;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 3

只需在此

中添加一个css属性即可

image-1 img，＃image-2 img，＃image-3 img

到

float：left;

Answer 4

使用 position: relative; 并使用左上、左下和右调整其位置。