CODEWITHSUNDEEP
cssimagecentercentering
John Tippin
John Tippin

Reputation: 41

Images refuse to center

Images refuse to center in the html code. Width is auto and has to be that. I'm trying to center images using margin:auto centering. The gallery is supposed to be wider than the viewport. Css and javascript: 

    #gallery{
        position:fixed;
        top:0px;
        left:50%;
        width:6000px;
        height:100%;
        margin-left:-3000px;
        background-image:url('images/bluey.jpg');
        background-position:center center;
        background-repeat:no-repeat;
        background-color:red;
    }
    .galimag{
        opacity:0.5;
        position:absolute;
        margin-left:auto;
        margin-right:auto;
        width:auto;
        height:80.3%;
        top:10.2%;
    }

</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
    var T = setInterval(function(){
        $('img.galimag').css('width','auto');
        $('img.galimag').each(function(){
            var w = $(this).width();
            $(this).width(w);
        });
    },100);
</script>

Html Here:

    <body>
      <div id="gallery">
          <img class="galimag" src="/images/grid.jpg"  alt="img"/> 
              <img class="galimag" src="/images/referrals.2.jpg"  alt="img"/>
         <img class="galimag" src="/images/referrals.3.jpg"  alt="img"/>
         <img class="galimag" src="/images/referrals.4.jpg"  alt="img"/>
         <img class="galimag" src="/images/referrals.5.jpg"  alt="img"/>
      </div>
      <div id="controls"></div>
      <div id="ipad-controls"></div>  
  </body>

How do I force them to center?

Upvotes: 1

Views: 251

Answers (2)

Michael Zaporozhets
Michael Zaporozhets

Reputation: 24566

Using either the center tag as below or setting a text-align: center; to the parent container will do it.

I also advise strongly that you delete your javascript, as it is actually doing nothing and simply spamming the console with errors.

  <body>
      <div id="gallery">

<center>

          <img class="galimag" src="/images/grid.jpg"  alt="img"/> 
              <img class="galimag" src="/images/referrals.2.jpg"  alt="img"/>
         <img class="galimag" src="/images/referrals.3.jpg"  alt="img"/>
         <img class="galimag" src="/images/referrals.4.jpg"  alt="img"/>
         <img class="galimag" src="/images/referrals.5.jpg"  alt="img"/>

<center>

      </div>


      <div id="controls"></div>
      <div id="ipad-controls"></div>  
  </body>

Upvotes: 0

Sven Bieder
Sven Bieder

Reputation: 5681

What the hell are you trying to achieve with your interval function?

Set the #gallery to text-align:center;

And the absolute position out of the images.

Upvotes: 1

Related Questions