Question

我正在尝试为TheOdinProject上的作业重新创建Google主页。如何将徽标粘贴在屏幕中央，两侧的像素数量相等？

这是我的代码：

＆＃13;

#logo {
  margin: auto;
  position: relative;
  display: block;
  width: 200px;
}
#searchbar {
  margin-left: 650px;
  position: relative;
  width: 1000px;
  line-height: 2;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>Google Homepage Project</title>
  <link type="text/css" rel="stylesheet" href="stylesheet.css" />
</head>

<body>
  <div id="logo">
    <img src="http://fineprintnyc.com/images/blog/history-of-logos/google/google-logo.png">
  </div>
  <div id="searchbar">
    <form action="#" method="POST">
      <input type="text" name="searchbar">
    </form>
  </div>
</body>

</html>

＆＃13;

Answer 1

#logo {
  margin: auto;
  position: relative;
  display: block;
  width: 200px;
}
#searchbar {
  margin-left: 650px;
  position: relative;
  width: 1000px;
  line-height: 2;
}

#logo img {
  max-width: 100%;
}

  <div id="logo">
    <img src="http://fineprintnyc.com/images/blog/history-of-logos/google/google-logo.png">
  </div>
  <div id="searchbar">
    <form action="#" method="POST">
      <input type="text" name="searchbar">
    </form>
  </div>

所以你有一个容器div#logo，你指定宽度为200px。然后在其中放置一个物理宽度为570px的图像。你有什么期待？

要解决此问题，请调整图像大小，或将此css指定给它：

#logo img { max-width: 100% }

图像不会以边距为中心：auto;

1 个答案: