Question

当视口为320px时，我正试图将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

Answer 2

如果您想在屏幕中间使用它，请尝试使用此方法:)

.logo{
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

如果您只想将其水平放置，只需移除顶部和底部即可。

媒体查询图像定位问题

2 个答案: