gpt4 book ai didi

html - 应用 flex-direction 后,如何将我的 div 置于 @media 查询中?

转载 作者:行者123 更新时间:2023-12-05 05:39:20 25 4
gpt4 key购买 nike

<分区>

因此,在媒体查询中使用 flex-direction:column; 后,我尝试将 banner-content-container 放在中间,但它不起作用。它通常居中,但当它达到 776px 最大宽度时,它不会使 div 居中。

这是我的代码:

.banner-content-container {
display: flex;
justify-content: space-evenly;
padding-top: 200px;
}

@media screen and (max-width:776px) {
.banner-content-container {
display: flex;
justify-content: center;
flex-direction: column;
}
}
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>
<div class="banner-content-container">
<div class="content contexts1">
<h3>01. Mobile conductive</h3>
<p>Smart optimization of RWD design.</p>
</div>
<div class="content contexts2">
<h3>02. User Interface</h3>
<p>Brilliant UI/UX creative designs.</p>
</div>
<div class="content contexts3">
<h3>03. Affordable</h3>
<p>Our offers dont break the bank.</p>
</div>
</div>
</body>

</html>

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com