Как сделать следующий центр div в CSS, центрируя это содержимое, и как содержимое следующего должно быть размещено вмест ⇐ CSS

[Anonymous]

Я пытаюсь центрировать содержимое с помощью этого текста и изображения внутри элемента div по горизонтали и вертикали. Я определил ширину для элемента div, но содержимое по умолчанию остается выровненным по левому/правому краю, и оно должно быть соединено или прикреплено к изображению. Как я могу добиться центрированного макета, размещая каждый контент ближе, используя CSS, и наоборот? Вот прикрепленное изображение:
Проблема:
Выходное изображение проблемы
Решение:
Выходное изображение решения
Вот что я пробую и ожидал, что содержимое будет приклеиваться друг к другу, то же самое происходит и наоборот:
HTML-код:< /p>

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

[img]/assets/about_img/joron-about_img.png[/img]


Joaquin Aaron P. Recio | The Lead Programmer of Hug Haven.

CSS-код:

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

.joron_description {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}

.joron_description img {
height: 229px;
width: 210px;
margin: 0 auto;
}

.joron_description .joron-text {
background-color: rgb(7, 15, 43, 0.8);
border-radius: 10px;
text-align: center;
padding: 10px 30px;
margin: 0 auto;
}

Я надеюсь, что на данный момент это решения этой проблемы, ответы на этот вопрос очень ценятся!

Подробнее здесь: https://stackoverflow.com/questions/785 ... -and-how-t