Wie richtet man ein Bild horizontal in der Mitte eines div aus?

Question

Ich habe dies unter HTML-Code:

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

Ich versuchte this und mehr viel, aber es könnte zum Zentrum nicht ausrichten.

Answer 1

gelten 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

nur diese css In den #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

Tun Sie dies ..

<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

Das DIV, das Ihren IMG enthält, sollte ein display: block;
sein Das Bild sollte ein display: inline-block; oder sein Ausgangszustand sein;
Standardmäßig werden Bilder oder andere display: inline-block; Objekte wie Text behandelt, so dass Sie Ihrem DIV text-align: center; zuweisen müssen;

Hoffe das hilft Ihnen in Zukunft.