输入框与图片对齐问题求助：如何让Input与图片高度一致

问题核心 #

当前布局失效的原因很明确：

• .container 写了 justify-content 和 align-items 但未开启flex布局，这两个属性完全不生效
• 图片设置了上下外边距，且输入框高度与图片高度不匹配，再加上inline元素默认的基线对齐规则，直接导致两者错位

修正方案 #

调整CSS代码，用flex布局实现对齐，同时统一元素高度：

* {
  box-sizing: border-box; /* 统一盒子模型，避免padding/border打乱高度计算 */
}

.wrapper {
  margin: 0;
}

.container {
  display: flex; /* 开启flex，让内部元素自动水平排列+垂直居中 */
  justify-content: center;
  align-items: center;
  gap: 12px; /* 图片和输入框之间的间距，可按需调整 */
  text-align: center;
  
  h1 {
    font-family: "Roboto Light";
  }
}

.image img {
  height: 56px;
  width: 141px;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.input input {
  height: 56px; /* 和图片高度完全一致 */
  padding: 0 10px; /* 调整输入框内边距，让文字垂直居中 */
  border: 1px solid #ddd; /* 可选：给输入框加边框，视觉更协调 */
}

关键调整说明 #

1. 给 .container 加 display: flex，直接解决内部元素的水平排列和垂直居中问题
2. 用 box-sizing: border-box 统一盒子模型，确保输入框的高度包含内边距和边框，不会超出预期高度
3. 去掉图片的上下外边距，让图片的可视高度和输入框高度完全匹配
4. 调整输入框的内边距，保证输入内容在框内垂直居中

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