центральный якорный тег в макете сетки - PullRequest
Новая
       7

центральный якорный тег в макете сетки

1 голос
/ 03 октября 2019

Я пытаюсь центрировать тег <a> с фоновым изображением внутри сетки. Но это всегда слева от сетки.

что <a> делает в сетке против того, что я хочу сделать

@ media query - IЯ размещаю тег изображения поверх друг друга, а не рядом, когда размер экрана меньше. 

  main {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: "title title title" "classa classb classc";
}

.photoa {
  grid-area: classa;
  width: 175px;
  background: url(images/classa.png) no-repeat 0;
  opacity: .6;
}

.photob {
  grid-area: classb;
  width: 175px;
  background: url(images/classb.png) no-repeat 0;
  opacity: .6;
}

.photoc {
  grid-area: classc;
  width: 175px;
  background: url(images/classc.png) no-repeat 0;
  opacity: .6;
}

@media (max-width: 770px) {
  main {
    display: grid;
    row-gap: 10px;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 1fr);
    grid-template-areas: "title" "classa" "classb" "classc";
  }
<main>
  <h3 class="title">Click image below</h3>
  <a href="classa.html" class="photoa"></a>
  <a href="classb.html" class="photob"></a>
  <a href="classc.html" class="photoc"></a>
</main>

1 Ответ

0 голосов
/ 04 октября 2019

Центрирование тега - это вопрос margin: 0 auto

Центрирование фонового изображения - это вопрос установки background-position: center

Я также добавил границу к тегам якорей для лучшей видимостичтобы увидеть, что происходит.

Я ничего не видел в окне сниппета, поэтому изменил ваш медиазапрос. 

  main {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: "title title title" "classa classb classc";
}

a {
  border: 1px solid red;
  margin: 0 auto;
}

.photoa {
  grid-area: classa;
  width: 175px;
  background: url(https://picsum.photos/40/40) no-repeat 0;
  background-position: center;
  opacity: .6;
}

.photob {
  grid-area: classb;
  width: 175px;
  background: url(https://picsum.photos/40/40) no-repeat 0;
  opacity: .6;
}

.photoc {
  grid-area: classc;
  width: 175px;
  background: url(https://picsum.photos/40/40) no-repeat 0;
  opacity: .6;
}

@media (max-width: 1000px) {
  main {
    display: grid;
    row-gap: 10px;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 1fr);
    grid-template-areas: "title" "classa" "classb" "classc";
  }
<main>
  <h3 class="title">Click image below</h3>
  <a href="classa.html" class="photoa"></a>
  <a href="classb.html" class="photob"></a>
  <a href="classc.html" class="photoc"></a>
</main>
...