Вертикальный и горизонтальный выравнивающий элемент привязки, область, активируемая щелчком мыши, 100% родительского элемента

Question

Каким образом можно было бы центрировать вертикальный и горизонтальный тег привязки в родительском блоке или элементе уровня встроенного блока (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>

Answer 1

Без использования свойства flex вы можете добиться вертикального и горизонтального выравнивания элемента привязки.На самом деле, когда бы вы ни указали высоту элемента, вы должны присвоить этому элементу одинаковые значения LINE-HEIGHT .Свойство line-height определяет высоту строки.Таким образом, вы должны использовать одинаковую высоту строки для средней кнопки __link div.

Answer 2

вы можете сделать это с помощью таблицы отображения на теге <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>

Answer 3

Решено, благодаря @insertusernamehere, <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>