Html WordPress标题中的元素垂直居中

我正在尝试垂直居中我的标题元素，但我尝试的以下代码不起作用。我做错了什么？请告诉我在哪里可以添加填充物或其他东西

以下是网站：

到目前为止，我所拥有的：

<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>

您需要更改元素
.textwidget，
.extra-info和
中的
列。extra-info用于调整项目，然后使用css flex属性将列垂直居中对齐项目：居中

将以下内容添加到CSS中：

.textwidget {
    display: flex;
}
.extra-info {
    display: flex;
}
.extra-info .col-md-2 {
    display: flex;
    align-items: center;
}


N.B.您的站点有许多使用公共ID的元素（例如，标题中的所有
元素都使用相同的
#text-3
ID）

不应将同一ID用于多个元素。用通用类名替换它们，或者为每个元素使用不同的ID。
您需要更改元素
。textwidget，
.extra-info和
中的
列。extra-info用于调整项目，然后使用css flex属性将列垂直居中对齐项目：居中

将以下内容添加到CSS中：

.textwidget {
    display: flex;
}
.extra-info {
    display: flex;
}
.extra-info .col-md-2 {
    display: flex;
    align-items: center;
}


N.B.您的站点有许多使用公共ID的元素（例如，标题中的所有
元素都使用相同的
#text-3
ID）

不应将同一ID用于多个元素。用通用类名替换它们，或者为每个元素使用不同的ID。
您需要居中哪个元素？您可以看到所有图像都在顶部，而ph也没有对齐，请参见此URL，内容正确对齐，图像经过Photoshop处理。您需要居中哪个元素？您可以看到所有图像都在顶部，而且ph值也没有对齐，请参见此URL，内容正确对齐，图像经过Photoshop处理。