Question

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

我已经使用flexbox实现了预期的目标，但是，我想知道如何使用flexbox或grid来做到这一点。以下是使用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>

Answer 1

解决了该问题，这要归功于@insertusername，<a/>中的<button/>不是有效的HTML。这有助于将标记简化为看起来像并像按钮一样交互的锚标记，而不是嵌套元素。

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

.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>

Answer 2

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

Answer 3

u可以使用<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>

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

3 个答案: