Центрировать изображение в относительном div

Question

У меня есть relative div. В этом разделе я бы хотел центрировать изображение (чтобы было видно лицо собаки). Как я мог это сделать?

<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>


 <div class="relative h-24 overflow-hidden">
  <img class="absolute w-full h-auto" src="https://www.petmd.com/sites/default/files/Acute-Dog-Diarrhea-47066074.jpg" />
</div>

                

Answer 1

Добавьте эти стили к вашему img

top: 50%;
transform: translateY(-50%);

<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>


 <div class="relative h-24 overflow-hidden">
  <img style="top: 50%; transform: translateY(-50%);" class="absolute w-full h-auto" src="https://www.petmd.com/sites/default/files/Acute-Dog-Diarrhea-47066074.jpg" />
</div>

                

Answer 2

div {
  background-image: url('https://www.petmd.com/sites/default/files/Acute-Dog-Diarrhea-47066074.jpg');
  background-repeat: no-repeat;
  /* background size makes it full width */
  background-size: cover;
  background-position: center;
}

<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>


 <div class="relative h-24 overflow-hidden">
 
</div>

Это использует CSS, чтобы поместить изображение внутри div в качестве фона. Это то, что я люблю использовать.

Answer 3

Просто вставьте файл CSS или стиль изображения:

img {
    top: 50%;
    transform: translateY(-50%);
}

Answer 4

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

div{
  position: relative;
}

img{
  position: absolute;
  top: -220px; 
}

<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>


 <div class="relative h-24 overflow-hidden">
  <img class="absolute w-full h-auto" src="https://www.petmd.com/sites/default/files/Acute-Dog-Diarrhea-47066074.jpg" />
</div>