为什么垂直对齐不对齐链接中的图像和文本？ [重复]

Question

此问题已经在这里有了答案：

Vertically align text next to an image?（21个回答）

How to Vertical align elements in a div?（28个答案）

Flexbox: center horizontally and vertically（11个答案）

关闭3分钟前。

为什么锚中的图像和跨度文本未垂直对齐？我读了很多帖子，但无法破解。

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

Answer 1

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

Answer 2

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