Question

尝试在页面中间正确获取标题和图像，但是在确定如何执行此操作时遇到了很多麻烦。试图操纵箱子模型没有运气。我对这些东西很陌生，所以任何建议都有帮助。

＆＃13;

body {
  background: radial-gradient(gold, goldenrod);
  font-family: monospace;
  text-align: center;
  font-size: 1.5rem;
  position: relative;
}

img {
  padding: 10px;
}

img:hover {
  transform: scale(1.4);
  transition:all 1s;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-height: 400px;
}

＆＃13;

<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
  <h1>Choose Your Weapon</h1>
    <div class="container">
      <img src="images/rock.svg" alt="rock">
      <img src="images/paper.svg" alt="paper">
      <img src="images/scissors.svg" alt="scissors">
      <p></p>

    </div>
    <script src="app.js"></script>
  </body>
</html>

＆＃13;

Answer 1

您可以将flexbox用于此

＆＃13;

body {
  height: 100vh;
  background: radial-gradient(gold, goldenrod);
  font-family: monospace;
  font-size: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

img {
  padding: 10px;
}

img:hover {
  transform: scale(1.4);
  transition: all 1s;
}

＆＃13;

<h1>Choose Your Weapon</h1>
<div class="container">
  <img src="images/rock.svg" alt="rock">
  <img src="images/paper.svg" alt="paper">
  <img src="images/scissors.svg" alt="scissors">
  <p></p>

</div>

＆＃13;

Answer 2

尝试这样的事情：

＆＃13;

body {
  background: radial-gradient(gold, goldenrod);
  font-family: monospace;
  text-align: center;
  font-size: 1.5rem;
  position: relative;
}

img {
  padding: 10px;
}

img:hover {
  transform: scale(1.4);
  transition: all 1s;
}

.container {
  width: auto;
  margin: auto;
}

＆＃13;

<html>

<head>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <h1>Choose Your Weapon</h1>
  <div class="container">
    <img src="images/rock.svg" alt="rock">
    <img src="images/paper.svg" alt="paper">
    <img src="images/scissors.svg" alt="scissors">
    <p></p>

  </div>
  <script src="app.js"></script>
</body>

</html>

＆＃13;

Answer 3

问题是positioning并使用属性left, top，当您缩小屏幕尺寸时甚至会隐藏top text，而您可以将其position更改为relative并且然后使用margin将其与页面的center对齐，

body {
  background: radial-gradient(gold, goldenrod);
  font-family: monospace;
  text-align: center;
  font-size: 1.5rem;
  position: relative;
}

img {
  padding: 10px;
}

img:hover {
  transform: scale(1.4);
  transition: all 1s;
}

.container {
  position: relative;
  min-height: 400px;
  background: red;
  margin: auto;
  display: inline-block;
}

<h1>Choose Your Weapon</h1>
<div class="container">
  <img src="http://via.placeholder.com/100x100" alt="rock">
  <img src="http://via.placeholder.com/100x100" alt="paper">
  <img src="http://via.placeholder.com/100x100" alt="scissors">
  <p></p>
</div>

Answer 4

好吧，这可以通过我开始时学到的一个肮脏的小技巧来完成。在我开始之前，我想对您的代码进行一些更改：

A）无需为正文设置position: relative;，因为所有元素都会相对于页面正文自动移动。将位置设置为相对意味着您将身体内所有内容的位置元素限制为relative。因此，它将忽略absolute类的.container。

B）其次，我没有看到为什么如果你想把标题和图像保持在一起的原因，你不要把它们放在一个单独的课程中。它可以更容易地将它们一起移动而不是逐个移动。

现在，对于初学者，您需要设置min-height和min-width pixels 中的容器类。完成后，您可以通过以下方式将课程定位在中间位置：

top: 50%;
left:50%;
margin-top: -200px; /*half of the height of the container*/
margin-left: -200px; /*half of the width of the container*/

所以，现在你的代码，所有总结必须是这样的：

＆＃13;

body {
  background: radial-gradient(gold, goldenrod);
  font-family: monospace;
  text-align: center;
  font-size: 1.5rem;
}

img {
  padding: 10px;
}

img:hover {
  transform: scale(1.4);
  transition:all 1s;
}

.container {
  position: absolute;
  min-width: 400px;
  min-height: 200px;
  top:50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -200px;
}

＆＃13;

  <body>
  <div class="container">
    <h1>Choose Your Weapon</h1>
    
      <img src="images/rock.svg" alt="rock">
      <img src="images/paper.svg" alt="paper">
      <img src="images/scissors.svg" alt="scissors">
      <p></p>

    </div>
    <script>
    
    </script>
  </body>

＆＃13;

并猜测它甚至是响应的：）

如何在页面中间获取标题？

4 个答案: