Positioning text center with bootstrap 5 flex

In these divs:

<div class="col-6 col-md-4 col-lg-3 col-xl-2 my-3">
        	<a href="#" title="Falazóhabarcs" class="main_category d-flex justify-content-between align-items-center radius p-3">
                <div>
                    <i class="fa fa-th-list me-2"></i>Gépi alapvakolat
                </div>
                <div>
                    <i class="fa fa-chevron-right"></i>
                </div>
            </a>
        </div>

How can i align the text correctly center, when the screen is small? I mean it like on my photo below.

Or i should use 3 div in the hyperlink, and put the text into the 2nd div?

On the picture, the 3rd photo is mine, with a red X.

Click here for image

Add "d-flex align-items-center" classes at the parent tag of the icon & text(Left side)

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="col-6 col-md-4 col-lg-3 col-xl-2 my-3">
            <a href="#" title="Falazóhabarcs" class="main_category text-dark border text-decoration-none rounded-2 d-flex justify-content-between align-items-center radius p-3">
                <div class="d-flex align-items-center">
                    <i class="fa fa-3x fa-th-list me-2"></i>Gépi alapvakolat
                </div>
                <div>
                    <i class="fa fa-chevron-right"></i>
                </div>
            </a>
        </div>

<!-- end snippet -->

To align the text correctly in the center when the screen is small, you can use Flexbox or Bootstrap's utility classes. In this case, using Bootstrap's utility classes would be simpler and more consistent with your existing code. You can add text-center class to the outer <div> to center-align the text inside the hyperlink. Additionally, if you want to center-align the icon, you can add d-flex justify-content-center classes to the first inner <div>.

<div class="col-6 col-md-4 col-lg-3 col-xl-2 my-3">
    <a href="#" title="Falazóhabarcs" class="main_category d-flex justify-content-between align-items-center radius p-3">
        <div class="d-flex justify-content-center align-items-center">
            <i class="fa fa-th-list me-2"></i>Gépi alapvakolat
        </div>
        <div>
            <i class="fa fa-chevron-right"></i>
        </div>
    </a>
</div>

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

@media only screen and (max-width: 600px) {
  .text-font {font-size: 10px;}
}

<!-- language: lang-html -->

<div class ="text-font">
      <i class="fa fa-th-list me-2"></i>Gépi alapvakolat
</div>

<!-- end snippet -->

reduce fonts size of Gépi alapvakolat when mobile view by above media query