Question

因此，我试图使锚元素占据父元素的100％，以便所有父元素均可单击，并将文本在父元素内垂直和水平居中。配合以下HTML进行上述操作的CSS是什么？

<ul>
    <li><a>text</a></li>
</ul>

Answer 1

只需为其赋予display:block属性，它将使它占据其父级的100％，就像这样：

li {
  background-color:red;
}
a {
  background-color:blue;
  display:block;
  color:white;
  width:100%; // not actually necessary, but good practice
}

<ul>
    <li><a href="#">text</a></li>
</ul>

Answer 2

您可以将CSS display: block;或display:table;属性添加到锚点，使其宽度为100％。

ul{
list-style-type: none;
}

li{
width:80%;
margin-bottom:20px;
}

a{
position:relative;
line-height: 30px;
width:100%;
color:#fff;
background-color: #666;
display:table;
padding:5px 10px;
}

a:hover{
opacity: 0.8;
}

<ul>
    <li><a href="#">text 1</a></li>
    <li><a href="#">text 2</a></li>
    <li><a href="#">text 3</a></li>
</ul>

Answer 3

有几种方法可以执行此操作。它取决于您正在使用什么CSS，或者您想通过视觉完成的其他事情。

要记住的一件事是，只有<a>本身是可单击的。如果仅将锚点居于<li>内，则其周围的区域将无法单击，而只能单击其文本。为了使整个<li>行为看起来像是可单击的，您需要使锚点本身填充<li>内的整个空间。然后，您可以将文本置于锚点的中心。

一种方法是使用flexbox：

li {
  height: 100px; // for example, to demonstrate vertical centering
}

a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

注意：这里不要单独使用a选择器；这仅用于此代码段。您可能应该改用一个类。

仅供参考，到目前为止提供的其他答案实际上并未使文本居中，也没有考虑垂直居中。

如何将锚标记置于父元素内部居中，而锚占据父空间的所有空间

3 个答案: