我试图将标题元素垂直居中,但我试过的以下代码不起作用。我究竟做错了什么?请让我知道我可以在哪里添加填充或其他内容。
这是网站: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>
最佳答案
您需要更改元素 .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;
}
注意您的网站有很多元素使用相同的 ID(例如,标题中的所有 <aside>
元素都使用相同的 #text-3
ID)。
您不应对多个元素使用相同的 ID。将它们替换为通用类名或为每个元素使用不同的 ID。
关于html - 在 WordPress 标题中垂直居中元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54840624/