css - 使用媒体查询交换图像并使它们居中

Question

我是媒体查询的新手。我已将其设置为根据门户大小交换图像。这与以下代码配合得很好:

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

我的大 Logo 居中就好了。然而，我的小 Logo 位于右侧。我通过简单地更改浏览器窗口大小以及在我的 iPhone XSM 上测试了这一点。在我的手机上，很明显小标志在最右边。

我是不是漏掉了什么？

您也可以前往 http://thelavender.net/_fades/ 观看直播。

Answer 1

对我来说，让任何对象居中的最佳方式是:

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

在您的情况下，将其放入您的 div 容器中，并删除宽度。

在你的图片中，放置你的宽度标签。