为何使用vertical-align:top后页面图片仍居中？

我给静态网页里的图片设置了vertical-align: top;，但图片还是居中显示，尝试添加display: inline-block;也没效果。相关代码如下：

CSS代码 #

.login-page {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.phone {
  vertical-align: top;
  display: inline-block;
  transform: scale(0.65);
}

.ig-logo {
  transform: scale(0.35);
  display: inline-block;
}

HTML代码 #

<div class="login-page">
  <img src="https://picsum.photos/200/300?random=1" alt="phone" class="phone">

  <div class="login">
    <div class="login-box">
      <img src="https://picsum.photos/200/300?random=2" class="ig-logo" alt="logo">
    </div>
  </div>
</div>

问题出在父容器.login-page使用了Grid布局，vertical-align属性只对inline/inline-block元素在文本流中的对齐生效，对Grid容器的子元素完全不起作用。Grid布局的子元素对齐是由Grid自身的对齐属性控制的。

方法1：给Grid容器设置全局顶部对齐 #

修改.login-page的CSS，添加align-items: start;，这样所有Grid子项都会沿容器顶部对齐：

.login-page {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start; /* 新增：让子项顶部对齐 */
}

.phone {
  transform: scale(0.65);
  /* 可移除vertical-align和display: inline-block，它们在此场景无效 */
}

.ig-logo {
  transform: scale(0.35);
}

方法2：单独给目标图片设置顶部对齐 #

如果只想让.phone图片顶部对齐，其他子项保持默认，可以给.phone添加align-self: start;：

.phone {
  transform: scale(0.65);
  align-self: start; /* 单独设置该子项顶部对齐 */
}

两种方法都能实现图片顶部定位，可根据需求选择。

内容的提问来源于stack exchange，提问作者Amrdv09