Как разместить ссылку внутри блока по центру, а весь блок сделать ссылкой?

Question

[fleshik]

подскажите почему не срабатывает align-items: center и что изменить в коде https://pastebin.com/8M3vzLxK чтоб слово "ССЫЛКА" разместилось по центру блока то есть с одинаковыми отступами слева справа снизу и сверху,а весь блок остался ссылкой

Comments

[Максим]

надо жн, самый говняную песочницу выбрать да и ещё не открывается, есть же jsfiddle, codepe надо именно pastebin выбрать

Answer 1

[Ankhena]

Да просто удалить div и задать стили ссылке

a {
  width: 300px;
  height: 200px;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

https://jsfiddle.net/4pcsr617/

Answer 2

[ThunderCat]

Во первых базы хтмл бы выучить сначала, например то что стили обрамляются тегом style.
Во вторых цсс лежит ниже хтмл, соответственно работать вообще не должен.
в третьих не надо тупить, есть нормальные сервисы для работы с хтмл/жс, такие как jsfiddle, codepen, используйте их.

https://jsfiddle.net/qk0yf653/1/

Answer 3

[Александр]

Вообще, чтобы сделать семантически верно, в случае, если в карточке есть ссылка, а кликабельной должна быть вся карточка, тогда делают так:

.card {
	position: relative;
}

.card .card__link::after {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	content: '';
}

Comments

[Froggyweb]

The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links). This example shows how this can be used to make an entire advertising block into a link:

<aside class="advertising">
 <h1>Advertising</h1>
 <a href="https://ad.example.com/?adid=1929&amp;pubid=1422">
  <section>
   <h1>Mellblomatic 9000!</h1>
   <p>Turn all your widgets into mellbloms!</p>
   <p>Only $9.99 plus shipping and handling.</p>
  </section>
 </a>
 <a href="https://ad.example.com/?adid=375&amp;pubid=1422">
  <section>
   <h1>The Mellblom Browser</h1>
   <p>Web browsing at the speed of light.</p>
   <p>No other browser goes faster!</p>
  </section>
 </a>
</aside>

[Александр]

Froggyweb, стилизовать неудобно так. А еще, если со скрин ридера такое прочесть, будет каша.

[Froggyweb]

Александр, стилизовать ? вообще никаких проблем не вижу
это кусок из спецификации htnl5 w3c

[Ankhena]

Александр,

стилизовать неудобно так

Что?

Ваш вариант хорош с семантической точки зрения, но плох тем, что невозможно выделить и скопировать текст, например, название товара.