Using media queries to swap images and center them

Question

I am new to media queries. I have it setup to swap an image based on the portal size. That is working great with the following code:

    <header>
      <div class="logo_div">
        <img src="images/logo_full.png" class="logo_full">
        <img src="images/logo_small.png" class="logo_small">
      </div>
    </header>

    /* Logo DIV */
    .logo_div {
      margin: auto;
      width: 50%;
    }

    /* Logo */
    .logo_small {
      display: none;
    }

    @media (min-width: 1200px) {
      .logo_full {
        display: block;
        text-align: center;
      }

      .logo_small {
        display: none;
      }
    }

My large logo is centered just fine. My small logo however sits to the right. I have tested this by simply changing the browser window size as well as on my iPhone XSM. On my phone, it is obvious that the small logo is to the far right.

Am I missing something here?

You can see this live also by going to http://thelavender.net/_fades/

Answer 1

For me the best way to center any object is:

#myobjectid{
   display:table;
   margin:0 auto;
}

In your case put it to your div container, and remove width.

Inside your image, put your width tag.