Question 45021 in Html Question posted in
Some basic documentation can be found here.

How to let upload file with img tag same align – Html

How can I make the img tag same align with the file upload input? I tried position:absolute but it doesn’t fit in responsive. Is there any text-align/align-items/justify-content can make it aligned?

.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>
Tags:

2

Answers


  1. 0

    I recommend learning flexbox, it’s extremely useful.

    .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>
    Login or Signup to reply.
  2. 0

    The optimal approach here would be to put the input tag in a separate div and the img tag in another separate div with same class name.

    <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: (Here, diplay: inline-block is used to align things vertically, which can be adjusted by vertical-align: middle/top/bottom.)

    .child {
  display: inline-block;
  border: 1px solid black;
  padding: 1rem 1rem;
  vertical-align: middle;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search