-1

I have this below 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>

I tried this and lot more but couldn't align it to center.

Community
  • 1
  • 1
BeanMRCode
  • 61
  • 3
  • 9

5 Answers5

2

apply style text-align:center to div as:

  <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>
kritikaTalwar
  • 1,730
  • 1
  • 17
  • 25
  • So I missed the `text-align:center`! and had figure out this for 8 hrs this is insane.... Thank you for that though. – BeanMRCode Feb 14 '17 at 10:30
0

Add only this css to #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>
Jagdish Parmar
  • 609
  • 5
  • 11
0

Do This ..

<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>
Vinay
  • 324
  • 1
  • 13
0

The DIV containing your IMG should be a display: block;
The image should be a display: inline-block; or its initial state;
By default images or any display: inline-block; objects are much treated like text, so you'll have to assign text-align: center; to your DIV;

Hope this helps you in future.

0

In css,

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

Using CSSGrid

ravsourabh
  • 73
  • 1
  • 9