html - 如何在限制 <a> 元素的可点击区域的同时将 <a> 元素置于 <div> 元素的中心？

Question

我的网页顶部有一个 div 元素，其中包含一个链接(使用 a 标记)。 div 元素横跨页面的整个宽度，我设法将 a 元素水平居中。 问题是用户可以单击 div 内的任意位置来打开链接，而我想将此“可单击区域”限制为仅 a 元素中的文本。

#header_div {} #link_home {
  display: block;
  font-family: 'Open Sans', sans-serif;
  font-size: 6.5em;
  font-weight: 900;
  margin: 0.05em;
  text-align: center;
  text-decoration: none;
}

<div id="header_div">
  <a id="link_home" href="index.html">HOME</a>
</div>

Answer 1

默认情况下链接是内联的。这意味着您可以在父级上使用 text-align 属性，并将文本水平对齐到 left、right 或 中心:

#header_div {
  /* note that all the font-* rules are inherited to children */
  font-family: 'Open Sans', sans-serif;
  font-size: 6.5em;
  font-weight: 900;
  text-align: center;
}
#link_home {
  text-decoration: none;
}

<div id="header_div">
  <a id="link_home" href="index.html">HOME</a>
</div>