如何在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

将样式text-align：center应用于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

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

希望这对以后有帮助。

Answer 3

仅将此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 4

做这个 ..

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

在CSS中

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

使用CSSGrid