如何将此图像居中放置在容器中？答案

【问题标题】：How to center this image inside a container?如何将此图像居中放置在容器中？
【发布时间】：2022-11-17 11:16:01
【问题描述】：

我已经尝试了很多答案，但没有一个给出图像水平居中的预期结果。

<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>

【问题讨论】：

标签： html css

【解决方案1】：

只是风格图像分区与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>

【讨论】：

看到text-align我不认为它会做图像。非常感谢！
默认显示图片排队，这意味着它们被呈现为周围文本的一部分。在你的情况下，图像分区不包含任何文本，无论是在图像之前还是之后，但如果它包含，你就会明白我的意思。