垂直和水平对齐锚元素，区域可点击 100% 的父级答案

【问题标题】：Vertical and horizontal align anchor element, area clickable 100% of parent垂直和水平对齐锚元素，区域可点击 100% 的父级
【发布时间】：2019-07-02 14:38:38
【问题描述】：

如何在父块或内联块级元素（div 或按钮）中垂直和水平居中锚标记，同时使锚的可点击区域 100% 为父元素的宽度和高度？

我已经使用 flexbox 实现了预期的目标，但是，我想知道如何在不使用 flexbox 或网格的情况下做到这一点。下面是使用 flexbox 的效果示例。

.medium-button {
  border: none;
  border-radius: 4px;
  color: #3a66db;
  padding: 0;
}

.medium-button__link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 160px;
  height: 48px;
}

<button class="medium-button">
  <a class="medium-button__link">
    Clickable link
  </a>
</button>

【问题讨论】：

请不要在button-元素中嵌套交互元素，例如a-。那是无效的 HTML。
谢谢，下面的答案是否适合该问题的解决方案？澄清一下，我可以使用上面的 flexbox 解决方案，使用嵌套在 div 中的 a 吗？

标签： javascript html css flexbox

【解决方案1】：

解决了，感谢@insertusernamehere，<button/> 中的<a/> 不是有效的 HTML。这有助于将标记简化为看起来像按钮并与之交互的锚标记，而不是嵌套元素。

--> 只需将锚标记设置为块级元素，这样您就可以指定宽度和高度，然后使用行高。

.medium-button__link {
    display: block;
    width: 200px;
    height: 48px;  
    text-align: center;
    line-height: 48px;
    background: #3a66db;
    color: #fff;
    font-family: 'OpenSans-Regular';
    font-size: 1em;
    border-radius: 4px;
    text-decoration: none;
}

  
<a class="medium-button__link" href="https://sirthisisawendys.com">
    Clickable link
</a>

【讨论】：

【解决方案2】：

不使用 flex 属性就可以实现锚元素的垂直和水平对齐。实际上，每当您给出元素的高度时，您都必须在该元素上给出相同的 LINE-HEIGHT 。 line-height 属性指定线条的高度。所以你必须在 medium-button__link div 上使用相同的行高。

【讨论】：

【解决方案3】：

你可以通过<a>标签和width:100%和height:100%上的显示表来做到这一点然后为跨度子添加：display: table-cell 和 vertical-align: middle

.medium-button {
  border: none;
  border-radius: 4px;
  color: #3a66db;
   width: 160px;
  height: 48px;
  padding: 0;
}

.medium-button__link {
 width:100%;
  height:100%;
  display:table;
   text-align:bottom;
}
span{
 display: table-cell;
    vertical-align: middle;
}

<button class="medium-button">
  <a class="medium-button__link">
    <span>Clickable link</span>
  </a>
</button>

【讨论】：