Как я могу выровнять заголовок слева от макета карты, даже когда планировка карты завершается? ⇐ Html

[Anonymous]

Требование < /strong>
У меня есть заголовок и макет карты с картами в горизонтальной планировке, заголовок выровнен на левом краю и над макетом карты, и оба из Эти компоненты находятся в середине.
Проблема
в Codepen/jsfiddle, это уже достигается, когда окно изменяется, там там Также не является проблемой, но проблема возникает, когда макет карты начинает обертываться, когда она переворачивается до вертикальной макета, расположение карт больше не центрируется. Я хочу, чтобы он продолжал сосредоточиться. /tl1msnb7/
Что я попробовал
, ссылаясь на Codepen/jsfiddle, я попытался добавить Levify-Content: Center; к классу. Однако заголовок все еще находится на левой стороне и больше не выровнен с макетом карты. Чтобы бороться с этой проблемой, я попытался изменить совместные элементы для центра в классе. P> Если кто -то мог бы указать мне в правильном направлении, я бы очень признателен.

Код: Выделить всё

Example

.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;
}






HELLO




Some random information.

this is some subtext under an illustration or image



Some random information.

this is some subtext under an illustration or image



Some random information.

this is some subtext under an illustration or image

Изменить: надеюсь, что это изображение полностью уточняет, что я хочу: https://imgur.com/a/61f371n

Подробнее здесь: https://stackoverflow.com/questions/794 ... ard-layout