-1

I've tried quite a few answers, but none give the expected result which is the image centered horizontally.

<div class="container">
  <div id="text" class="text" >
    <label for="client">Client:</label>
    <input list="client" class="form-control" id="client" name="client" disabled="">
    <label for="style">Style:</label>
    <input list="style" class="form-control" id="style" name="style" disabled="">
    <input type="hidden" list="itemId" class="form-control" id="itemId" name="itemId" disabled="" value="BOA-230109-A">
  </div>
  <div id="imageDiv" class="image">
    <img id="image" alt="Item image" src="https://drive.google.com/uc?export=view&amp;id=1832ZxN4bbNhNVlHV1hZUVjTjcR8dm" height="120" width="160">
  </div>
</div>
onit
  • 2,275
  • 11
  • 25

1 Answers1

1

Just style the imageDiv with text-align: center;

#imageDiv {text-align: center;}
<div class="container">
  <div id="text" class="text" >
    <label for="client">Client:</label>
    <input list="client" class="form-control" id="client" name="client" disabled="">
    <label for="style">Style:</label>
    <input list="style" class="form-control" id="style" name="style" disabled="">
    <input type="hidden" list="itemId" class="form-control" id="itemId" name="itemId" disabled="" value="BOA-230109-A">
  </div>
  <div id="imageDiv" class="image">
    <img id="image" alt="Item image" src="https://drive.google.com/uc?export=view&amp;id=1832ZxN4bbNhNVlHV1hZGUuUVjTjcR8dm" height="120" width="160">
  </div>
</div>
Brett Donald
  • 6,745
  • 4
  • 23
  • 51
  • Seeing ```text-align``` I wouldn't think it'd do images. Thanks a lot! – onit Nov 17 '22 at 03:02
  • 1
    By default, images display **inline**, which means they are rendered as part of the surrounding text. In your case, **imageDiv** doesn't contain any text, either before or after the image, but if it did, you'd see what I mean. – Brett Donald Nov 17 '22 at 03:04