如何让上传的文件与img标签相同对齐答案

【问题标题】：How to let upload file with img tag same align如何让上传的文件与img标签相同对齐
【发布时间】：2023-02-22 13:08:55
【问题描述】：

我怎样才能使图片标签与文件上传输入一致吗？我试过 position:absolute 但它不适合响应式。是否有任何 text-align/align-items/justify-content 可以使其对齐？

.input-file{
  padding:6px 10px;border:1px solid #d9d9d9; border-radius:8px;
}

<div>
  <input class="input-file" type="file"/>
  <img style="width:100px;height:100px;"/>
</div>

【问题讨论】：

标签： html css

【解决方案1】：

推荐学习flexbox，非常有用。

.container.row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.container.column {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.input-file{
  padding:6px 10px;border:1px solid #d9d9d9; border-radius:8px;
}

<h1>Aligned vertically</h1>
<div class="container row">
  <input class="input-file" type="file"/>
  <img style="width:100px;height:100px;"/>
</div>

<h1>Aligned horizontally</h1>
<div class="container column">
  <input class="input-file" type="file"/>
  <img style="width:100px;height:100px;"/>
</div>

【讨论】：

【解决方案2】：

这里的最佳方法是将 input 标签放在一个单独的 div 中，将 img 标签放在另一个具有相同类名的单独 div 中。

<div class="bo">
  <div class="child">
    <input class="input-file" type="file"/>
  </div>
  <div class="child">
    <img style="width:100px;height:100px;"/>
  </div>
</div>

CSS 这里 display: inline-block 用于垂直对齐东西，可以通过 vertical-align: middle/top/bottom 来调整。

.child {
  display: inline-block;
  border: 1px solid black;
  padding: 1rem 1rem;
  vertical-align: middle;
}

【讨论】：