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>

我尝试了this以及更多但是无法将其与中心对齐。

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

如何在div中水平对齐图像？

5 个答案: