Question

如何将A标签中的文本与图像对齐？这是我被困的地方。无论我尝试什么，它总是似乎从顶部边框对齐文本。我希望文本的中间相对于图像的中间居中。

问题似乎是A标签中的图像比文本高，无论如何，文本只是位于基线..

的CSS：

.ty-bar {
  position: fixed;
  left: 0;
  right: 0;
  top: 32;
  height: 40px;
  background-color: #AAA;
  z-index: 50;
}

.ty-bar ul {
  list-style-type: none;
  margin: 8px;
  padding: 0;
  border: 1px solid green;
  vertical-align: middle;
}

.ty-bar-left {
  float: left;
}

.ty-bar-right {
  float: right;
}

html：

<div class="ty-bar">
  <ul class="ty-bar-left">
    <li>

      <a href="#">
        <img src="https://cdn4.iconfinder.com/data/icons/miu/24/circle-back-arrow-outline-stroke-32.png" width="24" height="24"> Back
      </a>

    </li>
  </ul>

  <ul class="ty-bar-right">
    <li>
      <img src="https://cdn2.iconfinder.com/data/icons/files-folders-3/24/files-folders-52-32.png" width="24" height="24">
    </li>
  </ul>
</div>

Answer 1

为图片添加vertical-align: middle;。

JSfiddle

Here's an answer，您可以阅读更多但基本上：

由于它全部在一行中，它实际上是你想要对齐的图像，不是文字。

将A标签内的文本相对于同一A标签中的图像对齐

1 个答案: