css - 我没有成功垂直对齐标签内的文本

Question

如您在此处看到的，我无法垂直对齐 a 标签内的文本。

navigation-item__link {
  color: #000;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ccc;
}

<a class="navigation-item__link" href="/auth">Login</a>

也试过了，

vertical-align: middle;

但它也没有用。
任何帮助表示赞赏。

标签： cssflexbox

Answer 1

请看我的示例代码，希望您能理解并提供必要的代码。

更新：用 a 包装你的a标签，div并为该 div 提供 flex 属性。

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: #ccc;
}

<div class="wrapper">
  <a href="/auth">Login</a>
</div>