时间戳

首页 > 解决方案 > WordPress标题中的垂直居中元素

html - WordPress标题中的垂直居中元素

问题描述

我正在尝试将标题元素垂直居中，但是我尝试过的以下代码不起作用。我究竟做错了什么？请让我知道在哪里可以添加填充或其他内容。

这是网站：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>

在此处输入图像描述

标签： htmlcsswordpressflexboxbootstrap-4

解决方案

您需要将元素.textwidget和.extra-info列更改为col-md-2flex.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;
}

注意：您的网站有很多使用通用 ID 的元素（例如<aside>，标题中的所有元素都使用相同的#text-3ID）。

您不应为多个元素使用相同的 ID。将它们替换为通用类名或为每个元素使用不同的 ID。

推荐阅读