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

Question

Got two buttons that I want to have an icon and text in.

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

Here's the 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;
}

I removed the styling stuff from the button class. Currently they are not vertically centered, as visible in this screenshot.

Does anyone have any ideas?

Answer 1

删除另一行高，仅在显示块上添加行高

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

Answer 2

You can use display: table-cell combine with vertical-align: middle :

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

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