CSS 定位：内联图像对齐问题

Question

<div>
   <img class="top-cloud" src="images/cloud.png" alt="cloud-png">
   <h1>I'm Rithik.</h1>
   <p>B.E. Information Technology(IT) Student</p>
   <img class="bottom-cloud" src="images/cloud.png" alt="cloud-png">
</div>

如果我在我的网页中定义这个 div，底部云图像会在段落之后自行对齐而如果我在底云之后添加另一张图片（比底云大）。

<img src="images/mountain.png" alt="mountain-png">

云图像也随着我插入的新图像向下移动。云图像不应该保留在其先前的位置并且新图像紧随其后。为了更好地理解，我附上了屏幕截图。

在添加另一张图片之前。

添加山峰图像后，为什么云也向下移动以与山峰对齐？

Answer 1

如果您希望 2 个图像在同一行上，但在顶部而不是底部对齐，请使用 vertical-align: text-top;

默认设置为 baseline 这就是它们在底部对齐的原因。

img {
  vertical-align: text-top;
}

#img1 {
  width: 40%;
}
#img2 {
  width: 20%;
}

<div>
  <img id='img1' src='https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png'>
  <img id='img2' src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRP3y-tITlqjr7xjuWA4ooxpP-z8OtoeNqacg&usqp=CAU'>
</div>

为什么会这样

这里的图像是黑色的，它所在的区域是蓝色的。当您有 1 张图像时，它们的大小相同，因为图像是区域内唯一的东西。

当您有 2 张图像（将它们的默认值设置为 baseline）时，图像所在的区域会扩展以适应 images/all 行内的内容。

将vertical-align更改为text-top意味着两个图像都移动到区域的顶部，如下所示：

在你的例子中，区域（蓝色框）就是两个图像所在的线，它是这样工作的：

而当您只有 1 张图片时，蓝色框要小得多，因为它只是您较小图片的大小。

CSS 定位：内联图像对齐问题

CSS positioning : inline image alignment issue

html

css

css-position

为什么会这样