Question

我试图将一张图像（可口可乐的“古柯”）放在一个绝对元素.itemDisplay中，该图像没有固定的宽度。

我相信没有固定的宽度，因为它似乎会阻止图像居中。

在绝对元素中居中有很多答案，但我找不到任何针对多列的答案，而不仅仅是左边的50％等答案。 .itemDisplay位于名为.parentItem的div中，占屏幕的32％，带有一些填充和边距，每行有3个。

所有3列都有自己的图像，但我只是以第一列为例。

当包含古柯图像的div悬停时，它当前显示隐藏的div与可乐，图像居中，工作正常，我唯一的问题是以古柯图像为中心。

我已经尝试了所有答案，似乎无法让它发挥作用。

任何想法！？

https://jsfiddle.net/se23vvwu/

Answer 1

您的父元素必须是相对的，并且具有其子元素的大小。为此，如果您不能使用固定宽度，则可以使用width: fit-content;。然后我将left: 0; and right: 0;应用于绝对元素。

结果如下（您仍然需要适应悬停状态）：

#shopShelves {
width : 100%;
padding : 15px;
max-width : 100%;
margin : 0 auto;
}
.parentItem {
height : 200px;
background-color : #e7e7e7;
float : left;
margin-left : 1px;
margin-bottom : 1px;
position: relative;
}
.parentItem a {
position: relative;
width: 100%;
height: 100%;
display: inline-block;
}
.parentItem:hover .hoveredItem {
opacity : 1;
z-index : 1;
}
.parentItem:hover .itemDisplay {
opacity : 0;
}
.I33 {
width : 33.2%;
}
.displayCenter {
position : relative;
width : 33.2%;
background-color : #F00;
}
.parentItem:hover {
opacity : 1;
}
.itemDisplay {
  opacity: 1;
  transition: opacity 0s 0.2s;
  position: absolute;
  display: block;
  width: fit-content;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.hoveredItem {
opacity : 0;
margin-bottom : 0;
}
.imgcenter {
display : block;
margin : auto;
max-width : 280px;
float : none;
position : relative;
}

width: fit-content;与IE存在一些兼容性问题。但我非常确定有解决方法。有些人使用display: table;

更多浏览器特定属性：

  width: intrinsic;           /* Safari/WebKit uses a non-standard name */
  width: -moz-max-content;    /* Firefox/Gecko */
  width: -webkit-max-content; /* Chrome */

你可能需要做更多的研究。

希望这有帮助！

将图像置于3个响应列的绝对定位范围内

1 个答案: