Icon and Text Vertical alignment css - html

Question

<div class="container-fluid" >
<section id="current-weather">
<div class="card text-center text-white bg-dark mb-3 " style="width: 60%;">
<div class="card-header">
weather
</div>
<div class="card-body">
<h2>{{location}}</h2>
<hr style="width: 30%;height: 2px; margin: 20px auto 20px auto;color: black;">
<h5 class="card-title"><i class="wi wi-owm-{{weather_current['weather'][0]['id']}}" style="font-size: 2.2em;"></i>{{weather_current['temp']}}°C</h5>
</div>
</div>
</section>
</div>
I have a problem with alignment text and icon. Look at screenshot
I've already tried to use vertical-align: middle and baseline. Maybe somebody can resolve my problem.

Answer 1

Here I have aligned it vertically and horizontally.
.container-fluid{
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
width: 60%;
}
<div class="container-fluid" >
<section id="current-weather">
<div class="card text-center text-white bg-dark mb-3">
<div class="card-header">
weather
</div>
<div class="card-body">
<h2>{{location}}</h2>
<hr style="width: 30%;height: 2px; margin: 20px auto 20px auto;color: black;">
<h5 class="card-title"><i class="wi wi-owm-{{weather_current['weather'][0]['id']}}" style="font-size: 2.2em;"></i>{{weather_current['temp']}}°C</h5>
</div>
</div>
</section>
</div>
Thanks and best regards!

Answer 2

I really appreciate your work, but I was asking to align icon and text in one line not the whole container on web page.
Check this image
Finally I coped with that. Here is my solution:
.align-inline {
display: flex;
align-items: center;
justify-content: center;
}
<div class="container-fluid" >
<section id="current-weather">
<div class="card text-center text-white bg-dark mb-3">
<div class="card-header">
weather
</div>
<div class="card-body">
<h2>{{location}}</h2>
<hr style="width: 30%;height: 2px; margin: 20px auto 20px auto;color: black;">
<h5 class="card-title align-inline"><i class="wi wi-owm-{{weather_current['weather'][0]['id']}}" style="font-size: 2.2em;"></i>{{weather_current['temp']}}°C</h5>
</div>
</div>
</section>
</div>
This is how result looks like