Помогите пожалуйста,нужно разместить картинку посередине

Рейтинг: 0Ответов: 1Опубликовано: 01.03.2023

Нужно как то сделать картинку по середине,text-align не помогает введите сюда описание изображения

Вот css код,если нужен HTML,напишите

    * {
  margin: 0;
  padding: 0;
}

.ss {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3);
}

.cardd {
  margin: 1.5em;
}

.cardd>a>img {
  width: 100%;
  }

  .cardd>.info {
    text-align: center;
  }


  @media (max-width: 1000px) {
   
.ss {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(5);
}

}
  @media (max-width: 600px) {
   
    .ss {
      grid-template-columns: repeat(1, 1fr);
      grid-template-rows: repeat(9)
    }
  }
css html grid
Источник: Stack Overflow на русском

Ответы

▲ 0

grid-template-columns должно быть 1, так как изображение всего одно на линию и уже картинке задать display: block; margin: 0 auto;

* {
  margin: 0;
  padding: 0;
}

.ss {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3);
}

.cardd {
  margin: 1.5em;
}

.cardd>a>img {
  width: 100%;
}

.like-img {
  width: 200px;
  height: 100px;
  background-color: green;
  display: block;
  margin: 0 auto;
}

.cardd>.info {
  text-align: center;
}


@media (max-width: 1000px) {
  .ss {
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(5);
  }
}
@media (max-width: 600px) {

  .ss {
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(9)
  }
}
<div class="ss">
  <div clas="cardd">
    <div class="like-img"></div>
  </div>
</div>