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

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

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

Answer 3

df.loc[df.index.max()+1]=['total']+df.sum().tolist()[1:]
df
Out[80]: 
    name  number1  number2
0      a        5        3
1      b        3        2
2  total        8        5

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;
}

这使用css将图像放在div内作为背景。这是我喜欢使用的东西。

Answer 4

要获得预期效果，请使用负值的top，因为图像位置是绝对的

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>

相对div内的中心图像

4 个答案: