Question

例如：我有一个高度为div的div，比方说，100px。该div是链接（a - 标签）。

我的CSS：

a:hover, a:focus {
  background-color: gray;
}

这意味着，我希望链接的背景在聚焦时是灰色的。

但是停下来，这并不容易。我也想：

链接在整个高度上伸展（不在宽度，高度合成），因为这样新的backgroundcolor将从导航栏的顶部到底部。
链接中的文字应位于中心 - 垂直

我知道我可以在div中使用display: flex;执行这些操作，但不能同时执行。（对于拉伸，我需要align-items: stretch;，对于垂直居中，我需要align-items: center;。显然我不能同时使用它们。

Answer 1

您可以将链接设为100％高度，并使flex，height和align-items

垂直居中

div {
  height: 50vh;
}
a {
  display: inline-flex;
  background: #eee;
  height: 100%;
  align-items: center;
}
a:hover, a:focus {
  background-color: gray;
}

<div>
  <a href="#">link</a>
</div>

Answer 2

如果你的div是，那么说100px然后你需要做的就是设置你的嵌套元素来显示：inline-block并将它的line-height设置为div的值，即100px。 / p>

你可以尝试这样的事情。

＆＃13;

div {
  height: 100px;
  border: thin solid grey;
}
div a {
  display: inline-block;
  line-height: 100px;
  background-color: silver;
  color: white;
  text-decoration: none;
}
div a:hover {
  background-color: grey;
}

＆＃13;

<div><a href="https://google.com">Clicl Me!</a></div>

＆＃13;

（CSS）拉伸div但内容在中心

2 个答案: