如何将锚标签居中在父元素内，锚占据父元素的所有空间答案

【问题标题】：How to center an anchor tag inside a parent element with the anchor taking up all space of parent如何将锚标签居中在父元素内，锚占据父元素的所有空间
【发布时间】：2019-12-20 12:54:46
【问题描述】：

所以我试图让锚元素占据父元素的 100%，这样父元素都可以点击，并且在父元素内垂直和水平居中文本。为了实现上述目标，与以下 HTML 一起使用的 css 是什么？

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

【问题讨论】：

标签： html css

【解决方案1】：

有几种方法可以做到这一点。这在某种程度上取决于您围绕它使用的 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 选择器；这仅适用于此代码 sn-p。您可能应该改用一个类。

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

只需给它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>

【讨论】：