如何垂直对齐webfont和不同高度的文本

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

删除另一个行高，只在

上添加一个显示块的行高

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

Answer 2

您可以display: table-cell与vertical-align: middle结合使用

＆＃13;

＆＃13;

a {
  width: 100%;
  display: table;
}

.button .flaticon-phone16, .button .flaticon-tools6 {
    font-size: 30px;
}
.button p {
    margin: 0px;
}
.button {
    display: table-cell;
    font-size:15px;
    font-weight:bold;
    font-style:normal;
    line-height: 42px;
    height:42px;
    width:100%;
    text-decoration:none;
    text-align:center;
    padding: 0;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;