<分区>
<分区>
立即搜索链接卡在 div 顶部对齐。如何使此链接在 div 中垂直居中？
.advanced-button {
width: 200px;
height: 55px;
background-color: #f4c23d;
line-height: 40px;
}
.advanced-button a {
margin-left: 15px;
font-size: 16px;
font-family: 'Montserrat', sans-serif;
color: #222222;
font-weight: 700;
text-transform: uppercase;
vertical-align: middle;
}
.advanced-button i {
float: right;
width: 40px;
height: 55px;
line-height: 40px;
text-align: center;
background-color: #f0b20e;
}<div class="advanced-button">
<a href="#">Search Now<i class="fa fa-search"></i></a>
</div>最佳答案
最简单的方法是将链接上的行高设置为与 div 的高度相匹配:
.advanced-button {
width: 200px;
height: 55px;
background-color: #f4c23d;
line-height: 40px;
}
.advanced-button a {
margin-left: 15px;
font-size: 16px;
font-family: 'Montserrat', sans-serif;
color: #222222;
font-weight: 700;
text-transform: uppercase;
vertical-align: middle;
line-height:55px;
}
.advanced-button i {
float: right;
width: 40px;
height: 55px;
line-height: 40px;
text-align: center;
background-color: #f0b20e;
}<div class="advanced-button">
<a href="#">Search Now<i class="fa fa-search"></i></a>
</div>关于html - div中的链接如何垂直居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40293262/