I’m trying to center the content with this text and image inside a div element horizontally and vertically. I’ve defined a width for the div, but the content remains aligned to the left/right edge by default and it should be paired or sticked with the image. How can I achieve a centered layout with placing each content closer using CSS same when it comes to vice versa? Here is the attached image:

Problem:
Problem Output Image

Solution:
Solution Output Image

Here is what I try and I was expecting that it will stick the contents to each other, same goes when it comes to vice versa:

HTML Code:

<div class="joron_description">
  <img src="/assets/about_img/joron-about_img.png" alt="Joron's Image">
  <div class="joron-text">
    <p>
      Joaquin Aaron P. Recio | The Lead Programmer of Hug Haven.
    </p>
  </div>
</div>

CSS Code:

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

I hope they are solutions so far in this problems, replies in this question is much appreciated! 🙂