如何让img标签与文件上传输入框对齐？求响应式实现方案

当然可以，position:absolute 确实会因为脱离文档流导致响应式适配问题，用 align-items、justify-content（Flexbox布局）或者 text-align 配合垂直对齐属性就能轻松实现响应式的对齐效果，以下是具体方案：

方案一：Flexbox布局（推荐，适配全场景） #

Flexbox是最适合响应式布局的对齐方案，通过给父容器设置display: flex，配合align-items控制垂直对齐，justify-content控制水平分布，完全不需要固定尺寸，自动适配各种屏幕。

修改后的代码：

.input-file{
  padding:6px 10px;
  border:1px solid #d9d9d9; 
  border-radius:8px;
}
/* 给父容器添加Flex布局样式 */
.file-img-container {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  gap: 12px; /* 控制元素间的间距，替代margin，更灵活 */
  /* 可选：控制水平分布，比如左对齐用flex-start，居中用center，两端对齐用space-between */
  /* justify-content: flex-start; */
}

<div class="file-img-container">
  <input class="input-file" type="file"/>
  <img style="width:100px;height:100px;" alt="预览图"/>
</div>

方案二：text-align + vertical-align（简单场景适用） #

如果只需要基础的水平/垂直对齐，也可以利用行内元素的特性，给父容器设置text-align控制水平对齐，同时给input和图片添加vertical-align: middle实现垂直对齐：

.input-file{
  padding:6px 10px;
  border:1px solid #d9d9d9; 
  border-radius:8px;
  vertical-align: middle; /* 垂直对齐 */
}
.file-img-container {
  text-align: left; /* 水平左对齐，可选center居中 */
}
.file-img-container img {
  width:100px;
  height:100px;
  vertical-align: middle; /* 垂直对齐 */
  margin-left: 12px; /* 控制间距 */
}

<div class="file-img-container">
  <input class="input-file" type="file"/>
  <img alt="预览图"/>
</div>

两种方案都不会破坏文档流，能完美适配响应式布局，其中Flexbox方案更灵活，支持复杂的布局需求。

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