将图像垂直居中

Question

我有一个<a>标签，该标签表示我的网站上的链接。有些链接具有文本，有些链接具有图像。不幸的是，我无法获得以<a>垂直居中的图像链接。

.button {
  background-color: #339a8c;
  border-radius: 8px;
  color: #fff;
  font-weight: 400;
  margin: 0 5px;
  padding: 8px;
  text-decoration: none;
}
.buttonImage {
  background-color: #339a8c;
  border-radius: 8px;
  padding: 8px;
}

<div id="nav">
  <a class="button" href="/misc/why">Home</a>
  <a class="button" href="/about">About</a>
  <a class="button" href="/projects">Projects</a>
  <a class="buttonImage" href="/cubesolver"><img height="18px" src="img/cubesolver.png" /></a>
</div>

Answer 1

.button {
  background-color: #339a8c;
  border-radius: 8px;
  color: #fff;
  font-weight: 400;
  margin: 0 5px;
  padding: 20px 8px;
  text-decoration: none;
  
}
.buttonImage {
  background-color: #339a8c;
  border-radius: 8px;
  padding: 20px 8px;
}
.buttonImage img{
  display:[inline-]block;
  vertical-align: middle;
}

<div id="nav">
  <a class="button" href="/misc/why">Home</a>
  <a class="button" href="/about">About</a>
  <a class="button" href="/projects">Projects</a>
  <a class="buttonImage" href="/cubesolver"><img height="38px" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Happy_smiley_face.png/480px-Happy_smiley_face.png" /></a>
</div>

尝试这个

.buttonImage img{
    display: inline-block;
    vertical-align: middle;
}

更新对不起。IMG是内联元素，因此它们与父元素文本的基线保持一致。使用内联块，我们可以防止这种情况，并使用垂直平整设置我们想要IMG