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

<强>更新抱歉。 Imgs是内联元素，因此它们与父元素文本的基线对齐。使用内联块我们可以防止这种情况，通过vertical-align，我们可以设置我们想要img的位置

在div

1 个答案: