为什么锚中的图像和跨度文本未垂直对齐?我读了很多帖子,但无法破解。
.navLink {
display: inline-block;
height: 4rem;
width: 10rem;
line-height: 4rem;
padding-left: 1rem;
border: solid 1px red;
vertical-align: middle;
}
img {
border: solid 1px red;
}
span {
border: solid 1px red;
}
<ul>
<li class="">
<a href="#" class="navLink">
<img src="https://d2ph5fj80uercy.cloudfront.net/04/cat2972.jpg" class="navLink-img" width="20px" height="20px">
<span>Visualise</span>
</a>
</li>
</ul>
.navLink
类需要display: flex
和align-items: center
属性。
.navLink {
height: 4rem;
width: 10rem;
line-height: 4rem;
padding-left: 1rem;
border: solid 1px red;
vertical-align: middle;
display: flex;
align-items: center
}
img {
border: solid 1px red;
}
span {
border: solid 1px red;
}
<ul>
<li class="">
<a href="#" class="navLink">
<img src="https://d2ph5fj80uercy.cloudfront.net/04/cat2972.jpg" class="navLink-img" width="20px" height="20px">
<span>Visualise</span>
</a>
</li>
</ul>
在img的中间设置垂直对齐
.navLink {
display: inline-block;
height: 4rem;
width: 10rem;
line-height: 4rem;
padding-left: 1rem;
border: solid 1px red;
}
img {
border: solid 1px red;
vertical-align: middle;
}
span {
border: solid 1px red;
}
<ul>
<li class="">
<a href="#" class="navLink">
<img src="https://d2ph5fj80uercy.cloudfront.net/04/cat2972.jpg" class="navLink-img" width="20px" height="20px">
<span>Visualise</span>
</a>
</li>
</ul>