Vertically center elements in WordPress header - html

Question

I am trying to vertically center my header elements, but the following code that I've tried isnt working. What am I doing wrong? Please let me know where I can add padding or something else.
Here is the website: https://eagleroofingcontractor.com/
What I have so far:
<div class="col-md-12">
<aside id="text-3" class="widget header-right widget_text">
<div class="textwidget">
<div class="container extra-info">
<div class="row">
<div class="col-md-4">
<i class="fa fa-phone"></i>
<div class="phone">
<h3>631-209-7377</h3>
<span>info#eagleroofingcontractor.com</span>
</div>
</div>
<div class="col-md-2">
<div>
<img src="https://eagleroofingcontractor.com/wp-content/uploads/2019/02/Better-Business-Bureau-A-Logo.png">
</div>
</div>
<div class="col-md-2">
<div>
<img src="https://eagleroofingcontractor.com/wp-content/uploads/2019/02/gaf-master-elite-gold800px-800x292.jpg">
</div>
</div>
<div class="col-md-2">
<div>
<img src="https://eagleroofingcontractor.com/wp-content/uploads/2019/02/Google_Partners_logo_blogpage.jpg">
</div>
</div>
<div class="col-md-2">
<div>
<img src="https://eagleroofingcontractor.com/wp-content/uploads/2019/02/googole-guaranteed-min.png">
</div>
</div>
</div>
</div>
</div>
</aside>
</div>

Answer 1

You need to change the elements .textwidget, .extra-info and the col-md-2 columns inside .extra-info to flex items and then vertically center the columns using the css flex property align-items:center.
Add the following to your CSS:
.textwidget {
display: flex;
}
.extra-info {
display: flex;
}
.extra-info .col-md-2 {
display: flex;
align-items: center;
}
N.B. Your site has a lot of elements using a common ID (e.g. all your <aside> elements in your header uses the same #text-3 ID).
You should not use the same ID for more than one elements. Replace them with a common class-name or use a different ID for each element instead.