Using media queries to swap images and center them - css

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.

Answer 2

I want to add that you're making two http requests, for both the large and small logos, when you really need only one. Have you considered using picture?
The HTML <picture> element contains zero or more <source> elements and
one <img> element to provide versions of an image for different
display/device scenarios. The browser will consider each child
<source> element and choose the best match among them; if no matches
are found, the URL of the <img> element's src attribute is selected.
The selected image is then presented in the space occupied by the
<img> element.
This following snippet will produce only one logo at a time and shrink your CSS significantly.
<picture>
<source srcset="logo_full.png" media="(min-width: 1200px)" />
<source srcset="logo_small.png" />
<img srcset="logo_full.png" alt="My default image" />
</picture>