這個 css 文件中的 html 標簽到底在做什么？

Question

我對 css 很陌生，所以我正在做前端導師的練習挑戰之一。

我正在嘗試將我的 div 容器與 flexbox horz 和 vert 居中。 我無法讓它像在線教程和帖子所說的那樣工作，但我遇到了一篇帖子，當將 body 標簽的高度設置為 100% 時，頂部有一個額外的 html 標簽。 我試了一下，看看會發生什么，它奏效了。 我現在很困惑，如果有人能解釋為什么在頂部添加額外的 html 標簽允許 div 垂直居中，請告訴我，因為我很迷茫。

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site 
properly based on user's device -->
<title>Frontend Mentor | Order summary card</title>

<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" type="text/css" href="style.css">


</head>
<body>
<div class="container"> <!-- flex container-->

<img class="image" src="images/illustration-hero.svg">
<div class="white">
  <h2>Order Summary</h2>

  <p>You can now listen to millions of songs, audiobooks, and podcasts on any 
  device anywhere you like!</p>

  Annual Plan
  $59.99/year

  Change

  Proceed to Payment
  Cancel Order
</div>

</div>

</body>
</html>

CSS：（刪除 html 標簽不會垂直居中內容為什么）

html, body {
background-image: url("images/pattern-background-desktop.svg");
background-color:  #E0E8FF;
height: 100%;
margin: 0;

}

.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;


}

.image {
width: 400px;

}
.white {

background-color: white;
width: 500px;
height: auto;
}

Answer 1

將您的身體 css 設置為min-height:100vh

100vh 表示視口高度的 100%

body {
  min-height:100vh;
}

這個 css 文件中的 html 標簽到底在做什么？

問題描述

1 個解決方案

解決方案1
0 2021-11-25 19:31:49

這個 css 文件中的 html 標簽到底在做什么？

問題描述

1 個解決方案

解決方案1 0 2021-11-25 19:31:49

解決方案1
0 2021-11-25 19:31:49