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