时间戳

首页 > 解决方案 > 垂直和水平对齐锚元素，区域可点击 100% 的父元素

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

问题描述

如何在父块或内联块级元素（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>

标签： javascripthtmlcssflexbox

解决方案

解决了这个问题，感谢@insertusernamehere，<a/>里面的 a<button/>不是有效的 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>

推荐阅读