html - 如何垂直对齐不同高度的网页字体和文本

Question

有两个按钮，我想在其中添加图标和文本。

<a href="#">
    <div class="button">
        <i class="flaticon-tools6"></i>
        <p>View all services</p>
    </div>
</a>

<a href="#">
    <div class="button">
        <i class="flaticon-phone16"></i>
        <p>Get a quote</p>
    </div>
</a>

这是 CSS

.button .flaticon-phone16,
.button .flaticon-tools6 {
font-size: 30px;
line-height:42px;
}

.button p {
display: inline;
line-height:42px;
margin: 0px;
}

.button {
font-size:15px;
font-weight:bold;
font-style:normal;
line-height: 42px;
height:42px;
width:100%;
text-decoration:none;
text-align:center;
padding: 0;
}

我从按钮类中删除了样式内容。目前它们不是垂直居中的，如屏幕截图所示。

有没有人有什么想法？

Answer 1

删除其他行高，只添加显示 block 上的行高

.button p {display: block; margin: 0px; line-height: 42px; }