1

我有一个relativediv。在这个 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>

                

4

4 回答 4

4

将这些样式添加到您的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>

                

于 2019-05-07T13:58:41.703 回答
2

只需放入图像的 CSS 文件或样式:

img {
    top: 50%;
    transform: translateY(-50%);
}
于 2019-05-07T13:59:14.457 回答
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 作为背景。这是我喜欢使用的东西。

于 2019-05-07T14:03:50.550 回答
0

为了达到预期的效果,使用负值的顶部,因为图像位置是绝对的

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>

于 2019-05-07T15:02:24.150 回答