Label on the hidden File Input to be vertically aligned

Question

This is not a question about vertically centring in div exactly, but displying the label on the hidden File Input to be vertically aligned?

https://jsfiddle.net/pbv07uxm/

table {
  font-family: sans-serif;
}

.submitButton {
  height: 44px;
  width: 104px;
  display: block;
  background-color: #002044;
  color: white;
}

.hide {
  display: none;
}

.fileLabel {}

#photoButton {
  text-align: center;
}

<table>
  <tr>
    <td>
      <input class="submitButton" type="submit" value="Back">
    </td>
    <td>
      <input class="submitButton" type="submit" value="End">
    </td>
    <td>
      <div id="photoButton">
        <input type="file" name="photo" id="photo" class="hide" accept="image/*" capture="camera" />
        <label for="photo" class="submitButton fileLabel">Take photo</label>
      </div>
    </td>
  </tr>
</table>

Is there a special reason why you are using input fields instead of buttons? This situation should solve itself if you use buttons I think. — Enes Kirimi, Nov 13 '20 at 14:07
The input is a File upload input. This needs to be an Input AFAIK. — RGriffiths, Nov 13 '20 at 14:13

score 3 · Accepted Answer · answered Nov 13 '20 at 14:14

3

You can use flex. add these styles to

.fileLabel {
display:flex;
align-items:center;
justify-content:center;
}

https://jsfiddle.net/Lmzyt17v/

answered Nov 13 '20 at 14:14

Reza Sam

1,264
2
14
29

Label on the hidden File Input to be vertically aligned

1 Answers1