html - 媒体查询图像定位问题

Question

当视口(viewport)为 320 像素时，我试图将 img 居中。我尝试过使用不同的方法，但似乎没有任何效果。

.logo {
  width: 55px;
  height: 55px;
  margin: 10px 0 10px 30px;
  float: left;
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
  header {
    height: 300px;
  }

  .logo {
    width: 55px;
    height: 55px;
    clear: both;
    padding: 0;
    margin: 0;
    margin-left: 50%;
    margin-right: -50%;
  }
}

<header>
  <img class="logo" src="img/logo.png" alt="">
  <nav id="main_menu">
    <ul class="menu">
      <a href="index.html"><li>Home</li></a>
      <a href="how-it-works.html"><li>How It Work</li></a>
      <a href="learn-more.html"><li>Learn More</li></a>
      <a href="feed.html"><li>Student Feed</li></a>
      <a href="contact.html"><li>Contact Us</li></a>
    </ul>
  </nav>
</header>

Answer 1

你这边的愚蠢错误。它确实有效。你忘了右括号。然而，另一种方法是使用 float: right 和 margin-right: 50% - image-width

CSS

    .logo {
      width: 55px;
      height: 55px;
      margin: 10px 0 10px 30px;
      float: left;
    }
    @media only screen and (min-width: 320px) and (max-width: 479px) {
      header {
        height: 300px;
      }

      .logo {
    float:right;
    width: 55px;
    height: 55px;
    clear: both;
    padding: 0;
    margin-right: calc(50% - 55px);
  }
    }

HTML

<header>
  <img class="logo" src="img/logo.png" alt="">
  <nav id="main_menu">
    <ul class="menu">
      <a href="index.html"><li>Home</li></a>
      <a href="how-it-works.html"><li>How It Work</li></a>
      <a href="learn-more.html"><li>Learn More</li></a>
      <a href="feed.html"><li>Student Feed</li></a>
      <a href="contact.html"><li>Contact Us</li></a>
    </ul>
  </nav>
</header>

JSFIDDLE