要求 我有一个标题和卡片布局，该布局在水平布局中具有卡片，标题在卡片布局的左边缘和上方对齐，这两个组件都位于中间。
问题 在Codepen/jsfiddle中，这已经可以实现，当窗口大小时，也没有问题，但是当卡布局开始包装时，当它包装到垂直布局时，问题就会发生，卡片布局不再以中心为中心。我希望它继续以中心为中心。 Codepen：Https：//codepen.io/jia8-fat/pen/bngpryq jsfiddle：Https：//jsfiddle.net/tl1msnb7/
我尝试了什么 参考codepen/jsfiddle，我尝试添加Justify-content：Center;到.card-layout类，该类反过来将卡片布局中心。但是，标头仍位于左侧，并且不再与卡片布局对齐。为了解决这个问题，我试图修改以.content类中为中心的对齐项，但这使得文本的中心为中心，并且不再与卡片布局对齐。 如果有人可以将我指向正确的方向，我将非常感谢。 没有Codepen或JSFIDDLE的代码是：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example</title>
<style>
.card {
display: flex;
flex-direction: column;
width: 170px;
height: 170px;
background-color: lightblue;
color: white;
padding: 16px;
border-radius: 20px;
}
.card-layout {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.content {
margin: 0px auto;
display: flex;
flex-direction: column;
align-items: start;
}
.center {
display: flex;
justify-content: center;
}
</style>
</head>
<body>
<div class="center">
<div class="content">
<h2>HELLO</h2>
<div class="card-layout">
<div class="card">
<h2>Some random information.</h2>
<div class="subtext">
<p class="secondary-text">this is some subtext under an illustration or image</p>
</div>
</div>
<div class="card">
<h2>Some random information.</h2>
<div class="subtext">
<p class="secondary-text">this is some subtext under an illustration or image</p>
</div>
</div>
<div class="card">
<h2>Some random information.</h2>
<div class="subtext">
<p class="secondary-text">this is some subtext under an illustration or image</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
如果您希望一切都集中，您需要以下内容：
<body>
<div class="center">
<div class="content">
<h2>HELLO</h2>
<div class="card-layout">
<div class="card">
<h2>Some random information.</h2>
<div class="subtext">
<p class="secondary-text">this is some subtext under an illustration or image</p>
</div>
</div>
<div class="card">
<h2>Some random information.</h2>
<div class="subtext">
<p class="secondary-text">this is some subtext under an illustration or image</p>
</div>
</div>
<div class="card">
<h2>Some random information.</h2>
<div class="subtext">
<p class="secondary-text">this is some subtext under an illustration or image</p>
</div>
</div>
</div>
</div>
</div>
</body>
如果您希望将所有内容都集中到除标题外，您需要以下内容：
h2{
width:100%;
}
.card {
display: flex;
flex-direction: column;
width: 170px;
height: 170px;
background-color: lightblue;
color: white;
padding: 16px;
border-radius: 20px;
}
.card-layout {
display: flex;
flex-wrap: wrap;
gap: 4px;
justify-content:center;
}
.content {
margin: 0px auto;
display: flex;
flex-direction: column;
align-items: center;
}
.center {
display: flex;
justify-content: center;
}
<body>
<div class="center">
<div class="content">
<h2>HELLO</h2>
<div class="card-layout">
<div class="card">
<h2>Some random information.</h2>
<div class="subtext">
<p class="secondary-text">this is some subtext under an illustration or image</p>
</div>
</div>
<div class="card">
<h2>Some random information.</h2>
<div class="subtext">
<p class="secondary-text">this is some subtext under an illustration or image</p>
</div>
</div>
<div class="card">
<h2>Some random information.</h2>
<div class="subtext">
<p class="secondary-text">this is some subtext under an illustration or image</p>
</div>
</div>
</div>
</div>
</div>
</body>
告诉我，如果这是您想要的渲染