如何在 div 内水平居中对齐图像

Question

我在下面有这个HTML代码：

<div class="col-sm-12 col-md-12">
  <div class="answer-picture col-xs-12" id="bookListDiv">
    <div id="loadme" style="display:block; margin:0 auto">
      <img src="~/images/loader.gif" />
    </div>
  </div>
</div>

我尝试了这个以及更多，但无法将其与中心对齐。

Answer 1

将

样式文本对齐：居中应用于div：

  <div class="col-sm-12 col-md-12">
     <div class="answer-picture col-xs-12" id="bookListDiv">
           <div id="loadme" style="display:block; margin:0 auto;text-align:center">
                <img src="~/images/loader.gif"/>
          </div>
      </div>
  </div>

Answer 2

仅将此 css 添加到 #loadme{text-align：center;}

<div class="col-sm-12 col-md-12">
  <div class="answer-picture col-xs-12" id="bookListDiv">
    <div id="loadme" style="display:block; text-align:center">
      <img src="~/images/loader.gif" />
    </div>
  </div>
</div>

Answer 3

这样做..

<div class="col-sm-12 col-md-12">
  <div class="answer-picture col-xs-12" id="bookListDiv">
    <div id="loadme" class="text-center" style="display:block; margin: 0 auto !important;">
      <img src="~/images/loader.gif" />
    </div>
  </div>
</div>

Answer 4

包含 IMG 的 DIV 应该是display: block;
图像应为display: inline-block;或其初始状态;
默认情况下，图像或任何display: inline-block;对象都被视为文本，因此您必须将text-align: center;分配给 DIV;

希望这对您将来有所帮助。

Answer 5

在 css 中，

#loadme { display:grid; align-items:center;}

使用 CSSGrid