Вертикально центральные элементы в заголовке WordPress

Question

Я пытаюсь центрировать элементы заголовка по вертикали, но следующий код, который я пробовал, не работает.Что я делаю неправильно?Пожалуйста, дайте мне знать, где я могу добавить отступы или что-то еще.

Вот сайт: https://eagleroofingcontractor.com/

Что у меня есть:

<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

Вам необходимо изменить элементы .textwidget, .extra-info и столбцы col-md-2 внутри .extra-infoчтобы согнуть элементы и затем центрировать столбцы по вертикали, используя свойство css flex align-items:center.

Добавьте следующее в свой CSS:

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

---

NB На вашем сайте много элементов, использующих общий идентификатор (например, все ваши элементы <aside> в заголовке используют один и тот же #text-3 идентификатор).

Вы не должны использовать один и тот же идентификатор для нескольких элементов.Замените их общим именем класса или используйте разные идентификаторы для каждого элемента.