将中心 div 与 flex 对齐

Question

I`ve been struggling with some css code, specifycally with flex.我一直在努力处理一些 css 代码，特别是 flex。 First i had to figure it out how to stick footer at bottom but now i cant center my divs.首先，我必须弄清楚如何将页脚粘贴在底部，但现在我无法将我的 div 居中。 Here is the html:这是 html：

<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta
         name="viewport"
         content="width=device-width, initial-scale=1.0"
         />
      <link rel="stylesheet" href="style.css" />
   </head>
   <div class="page-container">
      <div class="content-wrap">
         <div class="optional-content-wrap">
            <h1>Write, edit and run HTML, CSS and JavaScript code online.</h1>
            <p>
               Our HTML editor updates the webview automatically in real-time as
               you write code.
            </p>
         </div>
      </div>
      <div>Footer</div>
   </div>
</html>
</div>

and the css:和 css：

.page-container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.optional-content-wrap {
display: flex;
flex-direction: column;
align-items: center;
align-content: center;
}
.content-wrap {
flex: 1 1;
}

Answer 1

You want the children of the flex to be centered.您希望 flex 的子级居中。 So I set .content-wrap display to flex, and aligned items within.所以我将.content-wrap显示设置为 flex，并在其中对齐项目。 also text-align center.也是文本对齐中心。

 .page-container { display: flex; flex-direction: column; min-height: 100vh; }.content-wrap { flex: 1 1; }.content-wrap { display: flex; flex-direction: column; justify-content: center; text-align: center; }

 <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="page-container"> <div class="content-wrap"> <div class="optional-content-wrap"> <h1>Write, edit and run HTML, CSS and JavaScript code online.</h1> <p> Our HTML editor updates the webview automatically in real-time as you write code. </p> </div> </div> <div>Footer</div> </div> </body> </html>

将中心 div 与 flex 对齐

问题描述

1 个解决方案

解决方案1
0 2022-09-22 20:27:39

将中心 div 与 flex 对齐

问题描述

1 个解决方案

解决方案1 0 2022-09-22 20:27:39

解决方案1
0 2022-09-22 20:27:39